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

が長方形コードhere作業

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

からマウスダウンズームを削除します