Css d3图形内部的文本颜色

我试图控制由

d3

渲染的图形中文本的颜色：

以下是我到目前为止所做的尝试，在创建图形的js代码的底部：

    d3.select('#gender_divide svg')
        .datum(datum)
        .transition().duration(500)
        .attr('width', 400)
        .attr('height', 400)
        .attr("fill","white")
        .attr('stroke', 'white')
        .call(chart);

这将导致文本周围出现白色笔划，但文本本身保持黑色，如您所见：

您知道如何更改图形中的文本样式吗

更新完整的代码：

数据性别划分=[{“值”：[{“值”：6.47312495585393，“标签”：“未知”}，{“值”：71.34687526882524，“标签”：“男性”}，{“值”：22.17999977558936，“标签”：“女性”}]，“键”：“第1级”}]；
nv.addGraph（函数（）{
var chart=nv.models.pieChart（）；
页边空白（{顶部：30，右侧：60，底部：20，左侧：60}）；
var datum=data\u gender\u divide[0]。值；
图表工具内容（函数（键、y、e、图形）{
var x=字符串（键）；
变量y=字符串（y）+'%'；
工具提示\u str=''+x+''+y；
返回工具提示\u str；
});
图表.显示图例（假）；
图表.显示标签（正确）；
图.油炸圈饼（假）；
图表
.x（函数（d）{返回d.label}）
.y（函数（d）{返回d.value}）；
图表.宽度（350）；
图表.高度（350）；
d3.选择（“#性别"）
.基准（基准）
.transition（）.持续时间（500）
.attr（'width'，400）
.attr（'height'，400）
.电话（图表）；
});

---

下面是一个正在运行的JSFIDLE:

您的代码有两个问题。第一个比较简单，第二个比较微妙

为了控制文本的颜色，需要显式使用

d3

选择要更改的

元素。您需要这样做：

d3.selectAll("#gender_divide text").attr("fill", "white");

d3.selectAll("#gender_divide text").style("fill", "white");

代码尝试设置

.attr（“fill”，“white”）

，这是更改

元素的填充颜色的有效方法，这是正确的。但是，NVD3会自动为

元素设置

style=“fill:rgb（0,0,0）”

，这会覆盖您设置的

填充。因此，不要设置
.attr（“fill”，“white”）
，而是如下设置样式的fill属性：

d3.selectAll("#gender_divide text").attr("fill", "white");

d3.selectAll("#gender_divide text").style("fill", "white");

然后NVD3将不会覆盖您的填充，并且您的
将显示为白色

---

在中间工作

尝试将以下内容添加到您的JS中：

d3.选择（“#性别划分文本”）.attr（“填充”、“白色”）

text

元素中的文本可以使用填充而不是笔划（提供轮廓）着色。在代码中，您没有隐式地选择

文本

元素，只选择父SVG。 另一种方法是在CSS中添加以下内容：

#gender_divide text{
   fill:white;
}

请尝试以下代码：

这里

D3.Js

 d3.selectAll("text").style("fill","red");

---

你应该用

.style（“fill”，“white”）

代替笔划。你的答案我真的不清楚。我不是js开发人员。我尝试用您的建议替换

.attr（“fill”，“white”）

，但无效。文本的颜色由

fill

定义，但

fill

是

的样式属性，而不是属性。因此，您将其设置为

d3。选择（“文本”）。样式（“填充”、“白色”）

。尝试单独添加该命令（在上一个命令之后），看看它是否有效。

d3.选择（“文本”）。样式（“填充”、“白色”）

仍然不起作用。尝试

d3.选择所有（“文本”）。样式（“填充”、“白色”）

。这会将所有文本更改为白色，而不仅仅是第一个元素。如果这不起作用，请发布一个更大的代码示例。好的，看看你的代码，我觉得它是d3。selectAll（“性别分割文本”）。样式（“填充”、“白色”）。

selectAll

很酷，很有效，但我在这一页上有多个图表。其中一些仍然需要黑色文本。为这些文本添加类名，然后使用d3。选择（“.selected”）。样式（“fill”，红色）；