d3v4 - yakınlaştırma (d3.zoom.x ile eşdeğer)

D3 kodumu v3'ten v4'e geçiriyorum ve d3.zoom.x, d3.zoom.y özellikleri için bir eşdeğerini bulmakla ilgili sorunları yaşıyorum. Burada d3v4 - yakınlaştırma (d3.zoom.x ile eşdeğer)

en önemli elementler dahil olmak üzere kısa bir kod parçası, verilmiştir: I (x) "zoom.x değiştirmek için kullanabilir çalıştık

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

Ancak, bunlar yalnızca ekseni yeniden boyutlandırır ve verileri zomasız bırakmaz.

kaynak

2016-09-08 Pety Petyy

bu oldukça eski olduğu için, hiç bir çözüm buldular? Aynı problemde sıkışıp kaldım. – jmk

Bu güne bir çözüm bulamadım - v4 için daha büyük bir topluluk olana kadar beklemeye karar verdim. –

** _ tl; dr: _ Refakatçınızı yeniden yapılandırmanıza yardımcı olabilir, neden ve nasıl yürüdüğüne dair bir bağlantıya ve bu çalışmanın bir örneğini görmeye çalışabilir ** Bir panayı uygulamaya çalışırken benzer bir proje üzerinde çalışıyorum/d3v4'te koordinat ızgara sistemini yakınlaştır ve React. Yol boyunca, bu [yeni yakınlaştırma/kaydırma çalışmasının nasıl yapıldığını açıklayan yazı] (http://emptypipes.org/2016/07/03/d3-panning-and-zooming/) ve bunu yapmak zorunda olduğumu farkettim. Yeniden düşüncemi nasıl yapılandırdığımı yeniden düşün. Daha sonra, bunu [dolduruyordum] [https://codepen.io/mduleone/pen/wJxrbj] saf d3'te [codepen] yarattım. Hala React tarafında çalışıyor. – mduleone

Sadece D3 ile çalışmaya yeni başladığımdan, d3 v3 ele geçirilmiş zumlama hakkında konuşamıyorum, ancak aşağıdaki kod sizi doğru yönde göstermelidir. Ne olduğunu açıklamak için elimden gelenin en iyisini yapacağım. Düzeltmeleri, geliştirmeleri ve daha iyi açıklamaları davet ediyorum.

İlk

, bir 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>

Bu kırmızı ve yeşil daire ile sadece basit bir saçılma grafiğidir. X ve y ekseninin bileşenlerini nasıl bozduğumu görebilirsiniz. Bu d3.zoom() ile devreye giriyor.

Sonraki, bir yakınlaştırma bileşeni ekleyelim. İşte

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

, o grafiği görebilir yakınlaştırma, yakınlaştırma-out ve iki eksen boyunca sürükleyerek sağlar. Sadece tek eksenli bir zum kullanmak istediğinize inanıyorum, bu durumda, her bir daire konumunun sadece x eksenini ve x bileşenini yeniden boyutlandırın.

Son bir snippet istediğini düşündüğüm şeyi yapıyor.

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

kaynak

2018-02-01 04:41:05

d3v4 - yakınlaştırma (d3.zoom.x ile eşdeğer)

cevap

İlgili konular