модернизация 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

Попробуйте это, что-то было переименовано.

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 d.x; }) 
 
     .attr("cy", function(d) { return d.y; }) 
 
     .call(drag); 
 
}); 
 

 
function dottype(d) { 
 
    d.x = +d.x; 
 
    d.y = +d.y; 
 
    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", d.x = d3.event.x).attr("cy", d.y = d3.event.y); 
 
} 
 

 
function dragended(d) { 
 
    d3.select(this).classed("dragging", false); 
 
}