d3 - 畫筆/平移縮放 - 在上x軸禁用平移

Question

我使用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]); 

} 

謝謝！

Answer 1

要禁止從矩形平移主圖表禁用鼠標按下變焦：

所以這個代碼：

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

工作代碼here取出鼠標按下變焦