NVD3 更改标签文本颜色答案

【问题标题】：NVD3 Change label text colorNVD3 更改标签文本颜色
【发布时间】：2014-07-04 12:32:13
【问题描述】：

我一直在拼命尝试更改我正在使用 nvd3.js 绘制的图表上的标签文本颜色 - 它们以黑色绘制，但由于它们包含的页面颜色，我需要它们为白色.

我正在使用 nvd3.js 版本 1.1.15BETA 和 d3.js 版本 3.3.13，通过 angularjs-nvd3-directives 版本 0.0.7 集成到我的 AngularJS 应用程序中。

是否有人对如何完成此任务有任何建议？

谢谢。

【问题讨论】：

标签： angularjs nvd3.js

【解决方案1】：

更改图表中的文本颜色，试试这个：

svg text {
    fill: white;
}

更改饼图中的标签颜色

.nvd3.nv-pie .nv-slice text {
    fill: white !important;
}

这是working fiddle。

希望对你有帮助

【讨论】：

这是一个很好的开始 - 它改变了图例标签的文本颜色。但是，图表“内部”的标签仍然是黑色的 - 检查它们显示它们具有“fill = rgb（0,0,0）”的内联样式:(
您所说的图表“内部”标签是什么意思。您能否更具体一点。你指的是工具提示吗？你用的是什么图表？
这是一个饼图，它是“价值标签”或它们的名称 - 截图：drops.isharp.dk/mwRE/cHADC8Tm
谢谢，但它不起作用。内联样式似乎优先。
对于后面的人来说，标签文本似乎在.nv-pie，而不是.nv-slice（那只是一个SVG路径）。标签存储在nv-pieLabels （与.nv-slice 处于同一级别）@Marcelo Olgiati 在下面有正确的想法

【解决方案2】：

希望对你有帮助：

在您的控制器中：

$scope.callbackFunction = function(){
     return function(){
            d3.selectAll('.nv-pieLabels text').style('fill', "white");
     }
}

在您的 HTML 中（唯一重要的是 callback=callbackFunction()）：

<nvd3-pie-chart
 data="exampleData"
 id="exampleId"
 color="colorFunction()"
 width="1100"
 height="700"
 x="xFunction()"
 y="yFunction()"
 rotateLabels="120"
 showLabels="true"
 callback="callbackFunction()">
 <svg></svg>
</nvd3-pie-chart>

归功于：

https://github.com/cmaurer/angularjs-nvd3-directives/blob/master/examples/nvd3.callback.html & https://github.com/krispo/angular-nvd3/issues/8

【讨论】：