Question

我正在尝试控制由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);

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

Graph with black text with a white stroke

您知道如何更改图表中的文字样式吗？

更新完整代码：

 <div id="gender_divide"><svg style="width:350px;height:350px; body { color: white;}">  </svg></div>

<script>  
    data_gender_divide=[{"values": [{"value": 6.473124955585393, "label": "unknown"}, {"value": 71.34687526882524, "label": "men"}, {"value": 22.17999977558936, "label": "women"}], "key": "Serie 1"}];

    nv.addGraph(function() {
        var chart = nv.models.pieChart();
        chart.margin({top: 30, right: 60, bottom: 20, left: 60});
        var datum = data_gender_divide[0].values;

        chart.tooltipContent(function(key, y, e, graph) {
                    var x = String(key);
                    var y =  String(y)  + ' %';

                    tooltip_str = '<center><b>'+x+'</b></center>' + y;
                    return tooltip_str;
                });

            chart.showLegend(false);
            chart.showLabels(true);

        chart.donut(false);

        chart
            .x(function(d) { return d.label })
            .y(function(d) { return d.value });
        chart.width(350);
        chart.height(350);

        d3.select('#gender_divide svg')
            .datum(datum)
            .transition().duration(500)
            .attr('width', 400)
            .attr('height', 400)
            .call(chart);
    });
</script>

这是一个有效的jsfiddle：http://jsfiddle.net/oz123/QyrwC/8/

Answer 1

您的代码存在两个问题。第一个是相对简单的，第二个是更微妙的。

为了控制文字的颜色，您需要明确使用d3来选择要更改的<text>元素。你需要做这样的事情：
```
d3.selectAll("#gender_divide text").attr("fill", "white");
```
您正走在正确的轨道上，因为您的代码会尝试设置.attr("fill", "white")，这是更改<text>元素填充颜色的有效方法。但是，NVD3会自动为style="fill: rgb(0, 0, 0)"元素设置<text>，这会覆盖您设置的fill。因此，不要设置.attr("fill", "white")，而是设置样式的fill属性，如下所示：
```
d3.selectAll("#gender_divide text").style("fill", "white");
```
然后NVD3不会覆盖您的填充，而您的<text>将显示为白色。

使用JSFiddle here。

Answer 2

试试这段代码：

Fiddle 此处

<强> D3.Js

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

Answer 3

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

d3.select('#gender_divide text').attr("fill","white")

text元素中的文本可以使用填充而不是笔划（提供轮廓）进行着色。在您的代码中，您不是隐式选择text元素，而只选择父SVG。另一种方法是将以下内容添加到CSS中：

#gender_divide text{
   fill:white;
}

d3图形内的文字颜色

更新完整代码：

3 个答案: