d3v4 - zooming（d3.zoom.xと同等）

私はd3コードをv3からv4に移行しており、d3.zoom.x、d3.zoom.yプロパティに相当するものを見つけるのに問題があります。ここで d3v4 - zooming（d3.zoom.xと同等）

は最も重要な要素を含むコードの短い一部、です：I（x）は」zoom.xを置き換えるためにこれを使用しようとした

  this.init = function(obj, def) { 

      /* X-axis */ 
      x = d3.scaleTime() 
       .range([0, width]); 


      xAxis = d3.axisBottom(x) 
       .ticks(ticks); 

      svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")"); 

      /* Y-axis */ 
      for (var i = 0; i < 1; i++) { 
       // Returns the y and yAxis as arrays 
       createYAxis(i); 
      } 

      initZoom(); 

     }; 
      // Zoom trigger 
      var drawUpdXY = function(){ 
       setPause(true); 
       drawUpd(); 
       zoomY.y(y[0]); 
       zoomX.x(x); 


      zoom = d3.zoom() 
       .on("zoom", drawUpdXY); 

      zoomX = d3.zoom() 
       .on("zoom", drawUpdX); 

      zoomY = d3.zoom() 
       .on("zoom", drawUpdY); 
      };

; zoom.y（Y [0] ） "

 xAxis.scale(d3.event.transform.rescaleX(x)); 
     yAxis[0].scale(d3.event.transform.rescaleY(y[0]));

ただし、これらは軸を再スケールし、データは非zommedのままです。

出典

2016-09-08 Pety Petyy

これはかなり古いものですので、あなたが解決策を見つけましたか？私は同じ問題を抱えている。 – jmk

今日までの解決策が見つからない - v4のコミュニティがより大きくなるまで待つことにしました。 –

** _tl; dr：_リファクタリングを再構築したり、リンクを参照して、理由と方法を説明したり、その例を示したりするのに役立ちます。**同様のプロジェクトで、 d3v4とReactのズームグリッドシステム。途中で、私はこの[新しいズーム/パンの仕組みを説明する記事]（http://emptypipes.org/2016/07/03/d3-panning-and-zooming/）を使用して、私がどのように私のリファクタを構造化したのか考え直す。そして、純粋なd3でこれを作成しました（https://codepen.io/mduleone/pen/wJxrbj）。まだリアクション側に取り組んでいます。 – mduleone

私は最近D3での作業を開始して以来、d3 v3がズームをどのように処理したかについては話すことができませんが、下のコードは正しい方向に向けるべきです。私は何が起こっているのかを説明するために最善を尽くします。私は訂正、改善、そしてより良い説明を求めています。

まず、MCVE

<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Energy Visualizer</title> 
 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
 
    <script src="https://d3js.org/d3-color.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> 
 
    <style> 
 
    body { 
 
     background-color: #4e5965; 
 
    } 
 
    </style> 
 
    </svg> 
 
</head> 
 

 
<body> 
 
    <div class="chart" /> 
 
    <script> 
 
    var svg = d3.select(".chart").append("svg") 
 
     .attr("width", 200) 
 
     .attr("height", 200); 
 

 
    var data = [{ 
 
     "x": 2, 
 
     "y": 8, 
 
     "color": "green" 
 
    }, { 
 
     "x": 4, 
 
     "y": 6, 
 
     "color": "red" 
 
    }]; 
 

 
    var width = svg.attr("width"); 
 
    var height = svg.attr("height"); 
 

 
    x_scale = d3.scaleLinear().domain([0, 10]).range([0, width]); 
 
    y_scale = d3.scaleLinear().domain([0, 10]).range([0, height]); 
 

 
    var circles = svg.selectAll("circle") 
 
     .data(data) 
 
     .enter() 
 
     .append("circle") 
 
     .attr("cx", function(d) { 
 
     return x_scale(d.x); 
 
     }) 
 
     .attr("cy", function(d) { 
 
     return y_scale(d.y); 
 
     }) 
 
     .attr("r", 5) 
 
     .attr("fill", function(d) { 
 
     return d.color 
 
     }); 
 

 
    var xAxis = d3.axisBottom(x_scale); 
 
    var yAxis = d3.axisRight(y_scale); 
 

 
    var x_axis = svg.append("g").call(xAxis); 
 
    var y_axis = svg.append("g").call(yAxis); 
 
    </script> 
 
</body> 
 

 
</html>

これは、赤と緑の円との単純な散布図です。私はx軸とy軸の成分をどのように分解したかを見ることができます。これはd3.zoom()で始まります。

次に、ズームコンポーネントを追加します。ここで

<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Energy Visualizer</title> 
 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
 
    <script src="https://d3js.org/d3-color.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> 
 
    <style> 
 
    body { 
 
     background-color: #4e5965; 
 
    } 
 
    </style> 
 
    </svg> 
 
</head> 
 

 
<body> 
 
    <div class="chart" /> 
 
    <script> 
 
    var svg = d3.select(".chart").append("svg") 
 
     .attr("width", 200) 
 
     .attr("height", 200); 
 

 
    var zoom = d3.zoom() 
 
     .on("zoom", zoomed); 
 

 
    svg.call(zoom); 
 

 
    var data = [{ 
 
     "x": 2, 
 
     "y": 8, 
 
     "color": "green" 
 
    }, { 
 
     "x": 4, 
 
     "y": 6, 
 
     "color": "red" 
 
    }]; 
 

 
    var width = svg.attr("width"); 
 
    var height = svg.attr("height"); 
 

 
    x_scale = d3.scaleLinear().domain([0, 10]).range([0, width]); 
 
    y_scale = d3.scaleLinear().domain([0, 10]).range([0, height]); 
 

 
    var circles = svg.selectAll("circle") 
 
     .data(data) 
 
     .enter() 
 
     .append("circle") 
 
     .attr("cx", function(d) { 
 
     return x_scale(d.x); 
 
     }) 
 
     .attr("cy", function(d) { 
 
     return y_scale(d.y); 
 
     }) 
 
     .attr("r", 5) 
 
     .attr("fill", function(d) { 
 
     return d.color 
 
     }); 
 

 
    var xAxis = d3.axisBottom(x_scale); 
 
    var yAxis = d3.axisRight(y_scale); 
 

 
    var x_axis = svg.append("g").call(xAxis); 
 
    var y_axis = svg.append("g").call(yAxis); 
 

 

 
    function zoomed() { 
 
     var new_x_scale = d3.event.transform.rescaleX(x_scale); 
 
     var new_y_scale = d3.event.transform.rescaleY(y_scale); 
 

 
     x_axis.transition() 
 
     .duration(0) 
 
     .call(xAxis.scale(new_x_scale)); 
 

 
     y_axis.transition() 
 
     .duration(0) 
 
     .call(yAxis.scale(new_y_scale)); 
 

 
     circles 
 
     .attr("cx", function(d) { 
 
      return new_x_scale(d.x) 
 
     }) 
 
     .attr("cy", function(d) { 
 
      return new_y_scale(d.y) 
 
     }); 
 

 
    } 
 
    </script> 
 
</body> 
 

 
</html>

、あなたはそのチャートはズームイン、ズームアウトし、両方の軸をドラッグすることができます見ることができます。私はあなたが単一軸のズームだけを望んでいると信じているので、その場合、各円の位置のx軸とx成分を再スケールします。

あなたが望むと思うことを最後のスニペットで行います。

<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Energy Visualizer</title> 
 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
 
    <script src="https://d3js.org/d3-color.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> 
 
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> 
 
    <style> 
 
    body { 
 
     background-color: #4e5965; 
 
    } 
 
    </style> 
 
    </svg> 
 
</head> 
 

 
<body> 
 
    <div class="chart" /> 
 
    <script> 
 
    var svg = d3.select(".chart").append("svg") 
 
     .attr("width", 200) 
 
     .attr("height", 200); 
 

 
    var zoom = d3.zoom() 
 
     .on("zoom", zoomed); 
 

 
    svg.call(zoom); 
 

 
    var data = [{ 
 
     "x": 2, 
 
     "y": 8, 
 
     "color": "green" 
 
    }, { 
 
     "x": 4, 
 
     "y": 6, 
 
     "color": "red" 
 
    }]; 
 

 
    var width = svg.attr("width"); 
 
    var height = svg.attr("height"); 
 

 
    x_scale = d3.scaleLinear().domain([0, 10]).range([0, width]); 
 
    y_scale = d3.scaleLinear().domain([0, 10]).range([0, height]); 
 

 
    var circles = svg.selectAll("circle") 
 
     .data(data) 
 
     .enter() 
 
     .append("circle") 
 
     .attr("cx", function(d) { 
 
     return x_scale(d.x); 
 
     }) 
 
     .attr("cy", function(d) { 
 
     return y_scale(d.y); 
 
     }) 
 
     .attr("r", 5) 
 
     .attr("fill", function(d) { 
 
     return d.color 
 
     }); 
 

 
    var xAxis = d3.axisBottom(x_scale); 
 
    var yAxis = d3.axisRight(y_scale); 
 

 
    var x_axis = svg.append("g").call(xAxis); 
 
    var y_axis = svg.append("g").call(yAxis); 
 

 

 
    function zoomed() { 
 
     var new_x_scale = d3.event.transform.rescaleX(x_scale); 
 

 
     x_axis.transition() 
 
     .duration(0) 
 
     .call(xAxis.scale(new_x_scale)); 
 

 
     circles 
 
     .attr("cx", function(d) { 
 
      return new_x_scale(d.x) 
 
     }); 
 

 
    } 
 
    </script> 
 
</body> 
 

 
</html>

出典

2018-02-01 04:41:05

d3v4 - zooming（d3.zoom.xと同等）

答えて

関連する問題