Question

我正在画一个饼图，我希望标签上有一个断点。标签是我从csv文件获得的状态和百分比。

var g = svg.selectAll(".arc")
        .data(pie(data))
        .enter().append("g")
        .attr("class", "arc")


        g.append("path")
        .attr("d", arc)
        .style("fill","#FFFFFF")
        .transition()
        .ease("bounce")
        .duration(2000)
        .delay(function(d, i) {return i * 1000;})
        .style("fill", function(d) {return color(d.data.Source);});

        g.append("text")
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .html(function(d) { 
            if (eval(d.data.Components) >0)
               {
                   return ((d.data.status) + " </br>  "  + "     " + d.data.Percentage + "%");
               }

    });

Answer 1

tspan和text元素的替代方法是foreignObject。您可以附加foreignObject，然后附加普通HTML。对你来说，它想要类似的东西：

g.append("foreignObject")
  .attr("width", "100px")
  .attr("height", "100px")
  .append("xhtml:div")
  .html(function(d) { 
    return ((d.data.status) + " <br>  "  + "     " + d.data.Percentage + "%");
  });

我发现这种方法过去比tspan和text元素更容易使用，因为它不涉及追加和定位更多元素而不是必要的。

Answer 2

text元素不允许使用br个标记。

来自docs：

每个'text'元素都会生成一个单独的文本字符串。 SVG不执行自动换行或自动换行。要实现多行文本的效果，请使用以下方法之一：



作者或创作包需要预先计算换行符并使用多个“文本”元素（每行文本一个）。



作者或创作包需要预先计算换行符，并将一个“text”元素与一个或多个“tspan”子元素一起使用   具有适当值的元素'x'，'y'，'dx'和   'dy'为那些开始新的角色设置新的起始位置   线。（此方法允许跨多行进行用户文本选择   文本 - 请参阅文本选择和剪贴板操作。）



表示要在另一个XML命名空间中呈现的文本，例如嵌入在“foreignObject”元素内的XHTML [XHTML]。（注意：   这种方法的确切语义没有完全定义   这一次。）

例如，在您的情况下，您必须将d.data.status和d.data.Percentage + "%"放入tspans元素中的两个text并手动指定dy在它们上面垂直对齐like the examples shown here。

如何在d3.js中的文本中设置断点

2 个答案: