0

我正在使用http://bl.ocks.org/mbostock/1283663

我正在尝试更改以下代码

d3.json("readme.json", function(root) {
  hierarchy.nodes(root);
  x.domain([0, root.value]).nice();
  down(root, 0);
});

到 JSON.parse （一些数据）。我在提取 JSON 数据时没有问题，但我完全不知道在 d3.json 进程的其余部分中设置的内容与 hierarchy.node(root)、x.domain 和 down(root)

4

1 回答 1

1

您可能需要阅读更多文档，然后才能真正了解此函数中发生的情况。这是一个棘手的例子；我只是要带你了解我试图理解的过程会是什么样子。逐行进行：

d3.json("readme.json", function(root) {

这会加载引用的json 文件并使用它调用函数。'root' 开始等于 json 文件。

  hierarchy.nodes(root);

查看代码，我们找到了声明层次结构的位置：

var hierarchy = d3.layout.partition()
    .value(function(d) { return d.size; });

所以层次结构是某种布局和层次结构。节点将添加一些有用的属性到根，这将使它更容易绘制图表。

  x.domain([0, root.value]).nice();

在我们找到的示例中搜索“x” x = d3.scale.linear().range([0, w])。Tt 似乎 x 是一个线性比例。基本上， x 函数会将域中的值转换[0, root.value]为 range [0, w]。w 是 svg 的宽度。root.value 有点棘手。节点页面说

value - 节点值，由值访问器返回

但是什么是值访问器？的初始声明表明它与根的“大小”属性有关，但是什么？此时，文档开始变得相当混乱，因此您可能想要弹出调试器并准确查看 root 和 root 子项的 value 属性是什么样的。

down(root, 0);

down 函数是该示例所独有的，并且得到了很好的评论。在参考文档的同时尝试通读它，看看你是否能弄明白。

于 2013-06-09T03:14:57.813 回答