d3.js节点之间的链接不呈现为行

Question

我正在使用修改后的气球图，并且在获取要渲染的节点之间的链接方面存在问题。我正在使用JustinVDM的自定义气球图（https://gist.github.com/justinvdm/3676778）

使用的数据是Bostock flare.json库存数据：http://bl.ocks.org/mbostock/4063530。

如果我在d3.json("flare.json", function(error, root) {...中加入“错误”选项，则会出错。没有它，至少会出现节点。是否确定了源和目标的数据？

如果是，下面的尝试是试图调用父源和目标子的坐标并在它们之间画一条线，但我不知道这种方法是否合适。我应该使用d3.svg.diagonal吗？

这是出现的图表：

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width =1500, 
    height = 1500, 
    diameter = Math.min(width, height),
    radius = diameter / 2;


var balloon = d3.layout.balloon()
  .size([width, height])
  .gap(50)                                      

var line = d3.svg.line()

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 + radius) + "," + (margin.top + radius) + ")")

    root = "flare.json";
    root.y0 = height / 2;
    root.x0 = width / 2;

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

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

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

  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  node.append("text")
      .attr("dx", function(d) { return d.x })
      .attr("dy", function(d) { return d.y })
      .attr("font-size", "5px")
      .attr("fill", "white")
      .style("text-anchor", function(d) { return d.children ? "middle" : "middle"; })
      .text(function(d) { return d.name; })
});

更新： 我在API参考中添加了以下关于“hierarchy.links”的代码：

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

结果有点奇怪，但如果我用d3.svg.diagonal()替换d3.svg.line()，则代码会中断。

如何制作边线而不是色带？

Answer 1

通过将填充设置为无并使用笔划定义颜色来创建边线。像这样：

var link = svg.selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", line)
  .attr("fill", "none")
  .attr("stroke", "black");

Answer 2

此布局中的节点之间没有链接。目标是将树表示为具有嵌套节点的图形。

但是，如果你真的想添加链接，即使他们只根据颜色或厚度添加信息，那么你总是可以通过给每个圆圈赋予不同的id来绘制圆圈之间的线条，然后在您可以从数据中source和target个圈子。