3

我正在绘制一个饼图，我希望标签带有断点。标签是我从 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 + "%");
               }

    });
4

2 回答 2

2

tspan和text元素的替代品是foreignObject. 您可以附加 a 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因为它不涉及附加和定位比必要更多的元素。

于 2013-09-20T14:14:39.690 回答
1

该text元素不允许br在其中添加标签。

从文档：

每个“文本”元素都会导致呈现单个文本字符串。SVG 不执行自动换行或自动换行。要实现多行文本的效果，请使用以下方法之一：

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

  • 作者或创作包需要预先计算换行符并使用单个“text”元素和一个或多个“tspan”子元素，这些子元素的属性“x”、“y”、“dx”和“dy”具有适当的值为那些开始新行的字符设置新的开始位置。（这种方法允许用户在多行文本中选择文本——请参阅文本选择和剪贴板操作。）

  • 表达要在另一个 XML 名称空间中呈现的文本，例如嵌入在“foreignObject”元素中的 XHTML [XHTML]。（注意：此时此方法的确切语义尚未完全定义。）

例如，在您的情况下，您必须在元素中放置两个不同的d.data.status和，并手动指定它们以垂直对齐它们，如此处所示的示例。d.data.Percentage + "%"tspanstextdy

于 2013-09-20T12:06:18.387 回答