將d3js從v3升級到v4會導致縮放問題

Question

我正在使用d3js v3，並且想升級到v4，但是升級到v4會導致縮放undefined

這是代碼：

var zoom = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

控制台顯示錯誤：

index.html:192 Uncaught TypeError: Cannot read property 'zoom' of undefined

我使用此示例作為實現的參考：

https://bl.ocks.org/mbostock/6123708

代碼@ Github頁面：

http://jmargieh.github.io/NBA-shots-chart-d3js/

謝謝您的幫助。

Answer 1

嘗試此操作，已將某些內容重命名為thats all。

 var margin = {top: -5, right: -5, bottom: -5, left: -5}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var zoom = d3.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); var drag = d3.drag() .subject(function(d) { return d; }) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.right + ")") .call(zoom); var rect = svg.append("rect") .attr("width", width) .attr("height", height) .style("fill", "none") .style("pointer-events", "all"); var container = svg.append("g"); container.append("g") .attr("class", "x axis") .selectAll("line") .data(d3.range(0, width, 10)) .enter().append("line") .attr("x1", function(d) { return d; }) .attr("y1", 0) .attr("x2", function(d) { return d; }) .attr("y2", height); container.append("g") .attr("class", "y axis") .selectAll("line") .data(d3.range(0, height, 10)) .enter().append("line") .attr("x1", 0) .attr("y1", function(d) { return d; }) .attr("x2", width) .attr("y2", function(d) { return d; }); d3.tsv("dots.tsv", dottype, function(error, dots) { dot = container.append("g") .attr("class", "dot") .selectAll("circle") .data(dots) .enter().append("circle") .attr("r", 5) .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) .call(drag); }); function dottype(d) { dx = +dx; dy = +dy; return d; } function zoomed() { container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); } function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true); } function dragged(d) { d3.select(this).attr("cx", dx = d3.event.x).attr("cy", dy = d3.event.y); } function dragended(d) { d3.select(this).classed("dragging", false); } 

Answer 2

對於縮放v3 vs v5（可能與goto v4的更改相同），我在另一個相關的stackoverflow上發布了有關此內容的信息，如果這對訪問此問題的人有用： dagre-d3 js Zoom適合所有內容