Question

我正在学习如何放大一点时间。为了学习，我一直试图进行树形图缩放。我正在使用这个jsfiddle示例（http://jsfiddle.net/6kEpp/1/）并尝试将其应用于没有折叠节点的树形图。我从Bostock的径向树状图例子中取出了这个树状图并将其拉直。

我为添加整个脚本道歉。

调试时，我被告知缩放没有在“.on（”缩放“，缩放））中定义;”。我见过没有定义var zoom的例子。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 2000 - margin.right - margin.left,
    height = 2000 - margin.top - margin.bottom;


var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);

var tree = d3.layout.tree()
    .size([height, width])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(d3.behavior.zoom()
        .x(x)
        .y(y)
        .scaleExtent([1,8])
        .on("zoom", zoom));


d3.json("flare.json", function(error, root) {
  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; });

  // zoom in / out
function zoom(d) {
        var nodes = svg.selectAll(".node");
        nodes.attr("transform", transform);

        // Update the links...
        var link = svg.selectAll(".link");
        link.attr("d", translate);

    }

    function transform(d) {
        return "translate(" + x(d.y) + "," + y(d.x) + ")";
    }

    function translate(d) {
        var sourceX = x(d.target.parent.y);
        var sourceY = y(d.target.parent.x);
        var targetX = x(d.target.y);
        var targetY = (sourceX + targetX)/2;
        var linkTargetY = y(d.target.x0);
        var result = "M"+sourceX+","+sourceY+" C"+targetX+","+sourceY+" "+targetY+","+y(d.target.x0)+" "+targetX+","+linkTargetY+"";
        //console.log(result);

       return result;
    }
});

d3.select(self.frameElement).style("height", "800px");
        </script>
    </body>
</html>

Answer 1

您的函数zoom()在函数d3.json()中定义，因此您无法在外部使用它。

由于您可能需要在d3.json()中使用此功能，我建议您也可以在此功能中调用它：

...
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

d3.json("flare.json", function(error, root) {
    svg.call(d3.behavior.zoom()
        .x(x)
        .y(y)
        .scaleExtent([1,8])
        .on("zoom", zoom));
    var nodes = tree.nodes(root),
        links = tree.links(nodes);
    ....
    function zoom(d){ ... }
    ...
})
...

Answer 2

<!DOCTYPE html>
<html lang="en">

需要打开标记，特别是如果您稍后在脚本中关闭</html>。尝试改变你的javascript布局，把你的function zoom(d)放在最上面，这样如果调用zoom就可以依赖变量定义。还要记住，如果在(d)之类的函数中指定一个值，则需要将其称为相同的

var d =  ;// ??

..().().().on("zoom", zoom(d)));

否则指定在函数调用时未给出d时要执行的操作。您可以在函数中询问现有的d，如

function zoom(){
  var d=arguments[0] || 'bar';
  console.log(d);
}
zoom('foo'); // 'foo'
zoom(); // 'bar'

添加d3.behavior.zoom时，.on（“缩放”，缩放），缩放未定义

2 个答案: