d3 - Кисть/Панорама Zoom - отключить панорамирование на верхней оси x

Question

Я использую d3 для построения графиков линий. Я реализовал масштабирование кисти/панорамирования после этого примера https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172. Я хочу отключить панорамирование на верхней оси оси. Когда я нажимаю на него, он вызывает кисть. Я только хочу вызвать его, когда я нажимаю на нижнюю ось 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]); 

} 

Спасибо!

Answer 1

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

Так этот код:

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

Снимите MouseDown зум от прямоугольника

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); 

Рабочий код here