使用 NVD3 库的 SVG 文本样式

Question

我用 NVD3.js 创建了一个非常简单的图表，可以在 this fiddle. 上看到

问题在于标题（中间的文本）由一个数字和一个符号 (%) 组成。

我需要将这两个部分的样式分开，但这似乎是一个真正的痛苦。

我发现我只能通过内联样式标签设置 SVG 样式，所以我已经申请了：

<div id="svgDiv"><svg id="test2" fill='#58B957' letter-spacing='-3px'></svg></div>

获得正确的颜色和间距。 现在我仍然需要 %-symbol 比数字小很多。我不能将其应用于完整的 svg，因为这会使一切变得更小。

我已经尝试了所有添加类、id、将它们包装在 tspan 等中的方式；还是想不通。

请告诉我有一个简单的解决方案吗？

Answer 1

我认为 nvd3 中没有直接的方法，但您可以使用此技巧来清空文本并填充 tspan。

  var text1 = d3.select(".nv-pie-title").text("");//get the title clear it
  text1.append("tspan").attr("class", "number").text("85")//make first tspan
  text1.append("tspan").attr("class", "percent").text("%")//make second tspan

工作代码here