1

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

使用的数据是股票 Bostockflare.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()，代码会中断。

在此处输入图像描述

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

4

2 回答 2

2

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

var link = svg.selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", line)
  .attr("fill", "none")
  .attr("stroke", "black");
于 2013-05-24T16:32:21.527 回答
1

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

但是，如果您真的想添加链接，即使它们仅通过颜色或粗细添加信息，那么您始终可以通过给每个圆圈不同的方式在圆圈之间绘制线条，然后在您的数据中绘制圆圈之间的id线条. sourcetarget

于 2013-04-16T05:31:18.420 回答