首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >将d3js从v3升级到v4会导致缩放问题

将d3js从v3升级到v4会导致缩放问题
EN

Stack Overflow用户
提问于 2016-08-08 00:46:01
回答 2查看 1.4K关注 0票数 0

我使用的是d3js v3,我想升级到v4,但是升级到v4会导致zoom变为undefined

代码如下:

代码语言:javascript
代码运行次数:0
运行
复制
var zoom = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

错误如控制台所示:

代码语言:javascript
代码运行次数:0
运行
复制
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/

谢谢你的帮助。

EN

回答 2

Stack Overflow用户

发布于 2016-08-08 16:18:30

试试这个,有些东西已经重命名了,仅此而已。

代码语言:javascript
代码运行次数:0
运行
复制
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);
}

票数 0
EN

Stack Overflow用户

发布于 2019-06-04 05:39:47

对于缩放v3和v5 (这可能是对goto v4的相同更改),我在另一个相关的stackoverflow中发布了关于这一点的信息,如果这对访问这个问题的人有用的话:dagre-d3 js Zoom Fit to all contents

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38816358

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档