Javascript d3圆形包装-多行打印标签

我对

d3

（通常是

JavaScript

）是个新手，我正试图找出如何修改，以便每个圆的名称下方都打印有相应的大小字段。我尝试更改JSON，使名称字段类似于

“mergedge\n743”

，但这不起作用（似乎只是忽略换行符并在一行上打印所有内容）。有什么提示吗？

一点提示，通常对于d3，您更喜欢为不同的目标使用单独的代码。它使维护变得更容易，而且在阅读文件时更容易理解。 在您的情况下，我们需要添加一个新的文本字段，其坐标将文本放置在当前文本下方。因此，我们需要补充：

node.filter(function(d) { return !d.children; }).append("text")
  .attr("dy", "1.2em")
  .text(function(d) { return Math.round(d.r).toString(); });

因此，整个javaScript代码将是：

var svg = d3.select("svg"),
    diameter = +svg.attr("width"),
    g = svg.append("g").attr("transform", "translate(2,2)"),
    format = d3.format(",d");

var pack = d3.pack()
    .size([diameter - 4, diameter - 4]);

d3.json("flare.json", function(error, root) {
  if (error) throw error;

  root = d3.hierarchy(root)
      .sum(function(d) { return d.size; })
      .sort(function(a, b) { return b.value - a.value; });

  var node = g.selectAll(".node")
    .data(pack(root).descendants())
    .enter().append("g")
      .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("title")
      .text(function(d) { return d.data.name + "\n" + format(d.value); });

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

  node.filter(function(d) { return !d.children; }).append("text")
      .attr("dy", "0.3em")
      .text(function(d) { return d.data.name.substring(0, d.r / 3); });

  node.filter(function(d) { return !d.children; }).append("text")
      .attr("dy", "1.2em")
      .text(function(d) { return Math.round(d.r).toString(); });
});

---

换行符在HTML中被忽略，您将无法在

SVG元素中使用

。您需要修改代码以附加一个新的带有该编号的

元素。好问题，我在这里遇到了与flare图形类似的问题：