javascript - 如何向路径添加文本

Question

我怀疑我找错了树——尽管我在控制台中没有任何错误可以帮助我解决问题。

我有这段代码:

var path = svg.data([json]).selectAll("path")
    .data(partition.nodes)
    .enter()
    .append("path")
    .attr("display", function(d) {
        return d.depth ? null : "none";
    })
    .attr("d", arc)
    .style("stroke", "#fff")
    .style("fill", function(d) {
        return color((d.children ? d : d.parent).name);
    })
    .attr("fill-rule", "evenodd")
    .style("opacity", 1)
    .each(stash);

//>>this section functions ok
path.append("title")
    .text(function(d) {
        return d.name + ": " + d.amount;
    });

//>>this section throws no errors but "foo" does not appear
path.append("text")
    .text(function(d) {
        return "foo";
    })
    .style("stroke", "#3b5998")
    .style("fill", "#3b5998");

以 path.append("title")... 开头的代码片段工作正常，但以 path.append("text")... 开头的最后一个片段将文本 foo 添加到 html 但它在网页上不可见 - 为什么它不可见以及如何添加标签？

这是这个视觉的一部分:

http://plnkr.co/edit/q9ODd5?p=preview

Answer 1

text 不能与 path 嵌套。您需要将其添加到 svg 中。此外，您需要以某种方式定位文本:

  svg.append("text")
    .text(function(d) {
        return "foo";
    })
    .attr("x", function(){ return 0 })
    .attr("y", function(){ return 0 })
    .style("stroke", "#3b5998")
    .style("fill", "#3b5998");