javascript - d3.js 强制导向问题， "d"的意义？

Question

我在使用 D3.js 时遇到了一些麻烦。也就是说，我正在尝试使用 http://bl.ocks.org/mbostock/1021953 中的基本代码制作一棵节点树。 .

我将它切换为内联加载数据，而不是从文件加载，因为我将它与 Rails 应用程序一起使用，并且不希望有重复的信息。我切换了线路，以便您可以看到我的数据格式。

无论如何，这是我的大部分代码:

<%= javascript_tag do %>
  var nodes = [{"title":"Duncan's Death","id":"265"},{"title":"Nature Thrown Off","id":"266"},{"title":"Cows Dead","id":"267"},{"title":"Weather Bad","id":"268"},{"title":"Lighting kills man","id":"269"},{"title":"Macbeth's Rise","id":"270"}];
  var links = [{"source":"265","target":"266","weight":"1"},{"source":"266","target":"267","weight":"1"},{"source":"266","target":"268","weight":"1"},{"source":"268","target":"269","weight":"1"}];

  var firstelement = +links[0].source;

  links.forEach(function(l) {
    l.source = +l.source;
    l.source = l.source-firstelement;
    l.target = +l.target
    l.target = l.target-firstelement;
    });

  var width = 960,
      height = 500;

  var color = d3.scale.category20();

  var force = d3.layout.force()
      .charge(-1000)
      .linkDistance(300)
      .size([width, height]);

  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  force
      .nodes(nodes)
      .links(links)
      .start();

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.weight); });

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("circle")
      .attr("class", "circle_node")
      .attr("r", 50)
      .style("fill", function(d) { return color(d.id); })

  node.append("title")
      .text(function(d) { return d.title; });

  node.append("text")
    .attr("x", function(d) { return d.x; } )
    .attr("y", function(d) { return d.y; })
    .text(function(d) { return d.title; });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("x", function(a) { return a.x; })
        .attr("y", function(a) { return a.y; }); 
  });

<% end %>

这似乎对我有用，但我似乎可以管理它。链接有效，但节点都保留在左上角。我试过直接输入圆圈并将文本附加到它们(靠近我上面列出的源代码)，但是虽然圆圈运行正常，但它不显示文本。我希望标题以节点为中心。

更一般地说，我对它的工作原理有点困惑。

function(d) { return d.source.x; }

好像是在声明一个函数的同时调用它。我知道它不一定是字符“d”(例如，将“d”切换为“a”似乎没有什么区别，只要它在声明和函数中都完成。 ) 但它指的是什么？输入到正在修改的对象中的数据？例如，如果我想打印出来(在属性之外)，我该怎么做？

抱歉，我是 D3 的新手(总体上对 JavaScript 来说还是相当新的)，所以我觉得答案很明显，但我一直在查找它并浏览教程，但我仍然迷路了。提前致谢。

Answer 1

首先，您的代码存在一个简单的问题，导致所有节点都位于左上角。您正在尝试使用代码定位每个节点:

node.attr("x", function(a) { return a.x; })
    .attr("y", function(a) { return a.y; }); 

但是，node 是 g 的选择 ，它不采用 x 和 y属性。相反，您可以使用平移变换移动每个 节点，例如

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

进行此更改应该允许节点四处移动。

---

接下来，转到您关于“d”的问题，我认为您首先需要了解的是您可以使用 D3 中的一系列元素做什么。来自 the docs :选择(例如 nodes)“是从当前文档中提取的元素数组。”一旦选择了元素，就可以应用运算符来更改元素的属性或样式。您还可以绑定(bind)数据到每个元素。

在您的例子中，您将数据绑定(bind)到选择的 g(节点):

var node = svg.selectAll(".node")
  .data(nodes)
  .enter().append("g")

然后您正在使用 attr改变每个节点的位置。但是，您没有将每个元素的 x 和 y 属性设置为相同的值，而是传递给 attr 一个 anonymous function。这将为每个节点返回一个(可能不同的)位置:

node.attr("x", function(a) { return a.x; })
    .attr("y", function(a) { return a.y; }); 

attr 的文档中也解释了此行为:

Attribute values and such are specified as either constants or functions; the latter are evaluated for each element.

因此，d 表示节点 中的单个元素(对象)。

所以回到你的代码，在每个滴答声中都会发生两件事:

1. force 正在重新计算每个节点(数据)的位置。
2. 然后，您传递给 force.on 的匿名函数会将每个对应的元素移动到其新位置。