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

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

我需要将这两个部分分开设置样式,但这似乎是很痛苦的。

我发现我只能通过内联样式标签对SVG进行样式设置,因此我已经应用了:

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


以获得正确的颜色和间距。现在,我仍然需要%符号比数字小很多。我不能将其应用于完整的svg,因为这会使所有内容变小。

我尝试了各种方式添加类,id,将它们包装在tspan中等。但我不知道。

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

最佳答案

我认为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

07-24 09:39
查看更多