使用 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

使用 NVD3 库的文本 SVG 样式

SVG styling of text with NVD3 library

css

d3.js

svg

nvd3.js