javascript - 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) {... 中包含“error”选项，它会出错。没有它，至少节点出现。是否甚至识别了源和目标的数据？

如果是，下面的尝试是尝试调用parent source和target child的坐标并在它们之间画一条线，但我不知道这种做法是否合适。我应该改为使用 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; })
});

更新:我从关于“hierarchy.links”的 API 引用中添加了以下代码:

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

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

我如何只制作边缘线而不制作丝带？

Answer 1

您可以通过将填充设置为无并使用描边来定义颜色来制作边缘线条。像这样:

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