d3 — Brush/Panning Zoom — отключить панорамирование по верхней оси x

Я использую d3 для построения линейных графиков. Я реализовал масштабирование кистью/панорамированием после этого примера https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172. Я хочу отключить панорамирование по верхней оси x. Когда я щелкаю там, перетаскиваю, он запускает кисть. Я хочу запускать его только тогда, когда я нажимаю на нижнюю ось X кистью или когда использую колесико мыши. Это код, отвечающий за эффект кисти:

   var brush = d3.brushX()
        .extent([[MARGINS.left, 0], [WIDTH, HEIGHT2]])
        .on("end", brushed);
    var zoom = d3.zoom()
        .scaleExtent([1, Infinity])
        .translateExtent([MARGINS.left,0], [WIDTH, HEIGHT])
        .extent([[MARGINS.left,0], [WIDTH, HEIGHT]])
        .on("zoom", zoomed);

    function brushed() {
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
    var s = d3.event.selection || xScale2.range();
    xScale.domain(s.map(xScale2.invert, xScale2));

    var limits = xScale.domain();
    var a = parseInt(limits[0]);
    var b = parseInt(limits[1]);
    var data1;
    if ((b-a) === screen.width) {
        data1 = shrinkArray(1, b, a);
    } else if((b-a) > screen.width) {
        data1 = shrinkArray(parseInt((b-a)/screen.width), b, a);
    } else {
        data1 = data;
    }

    for(var i = 0; i < numberOfSignals; i++) {
        if(signalBool[i]) {
           focus.selectAll("#line"+i).attr("d", lineGen(data1[i]));
            indexSignal = i;
        }
    }


    focus.select(".axis--x").call(xAxis);
    vis.select(".zoom").call(zoom.transform, d3.zoomIdentity
            .scale(WIDTH / (s[1] - s[0]))
            .translate(-s[0], 0));

}

    function zoomed() {
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
    var t = d3.event.transform;
    xScale.domain(t.rescaleX(xScale2).domain());

    for(var i = 0; i < numberOfSignals; i++) {
        if(signalBool[i]) {
            focus.selectAll("#line"+i).attr("d", lineGen(data[i]));
            indexSignal = i;
        }
    }

    focus.select(".axis--x").call(xAxis);
    context.select(".brush").call(brush.move, xScale.range().map(t.invertX, t));
    var limits = xScale.domain();
    var a = parseInt(limits[0]);
    var b = parseInt(limits[1]);

}

Благодарю вас!


javascript d3.js zooming brush panning
person cmplx96    schedule 08.09.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Чтобы отключить панорамирование на основном графике, отключите масштабирование прямоугольника мышью:

Итак, этот код:

svg.append("rect")
  .attr("class", "zoom")
  .attr("width", width)
  .attr("height", height)
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .call(zoom);

Удалить масштабирование мыши из прямоугольника

svg.append("rect")
  .attr("class", "zoom")
  .attr("width", width)
  .attr("height", height)
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .call(zoom).on("mousedown.zoom", null)
  .on("touchstart.zoom", null)
  .on("touchmove.zoom", null)
  .on("touchend.zoom", null);

Рабочий код здесь

person Cyril Cherian    schedule 08.09.2016