如何更改 d3js 图中图例的文本颜色？

Posted 2023-02-16

【中文标题】如何更改 d3js 图中图例的文本颜色？

【英文标题】：How to change text color of legend in d3js graph?

【发布时间】：2016-11-30 04:51:47

【问题描述】：

标题；我正在关注this tutorial on a stacked bar chart. 我有黑色背景，想将图例的颜色更改为白色。我已经用轴完成了，但似乎无法编辑图例文本。我试过了

.legend 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 60%;
    color: white; //added, but doesn't work

据我所知，这段代码：

svg.append("g")
        .attr("class", "legendLinear")
        .attr("transform", "translate(0,"+(height+30)+")");
var legend = d3.legend.color()
        .shapeWidth(height/4)
        .shapePadding(10)
        .orient('horizontal')
        .scale(color);

创建图例，但我不知道如何修改标记图例的文本标签。

您可能会说，我对 d3 和 javascript 非常陌生，并且非常迷茫。 任何帮助表示赞赏！

谢谢。

编辑：我将它添加到 CSS 中，但它完全删除了标签而不是使其变为白色（您可以通过将教程的背景更改为灰色来检查这一点）：

.legendLinear
     fill: '#ffffff'

EDIT2：我将其更改为：

.legendLinear text.label 
     fill: '#fff'

而且它似乎也不起作用；文字仍然是黑色的。

【参考方案1】：

    .axis path 
    stroke: white;

   .axis line 
    stroke: white;

   text  
    fill: white;

http://codepen.io/tcasey/pen/dXKrBx

这是一个可供参考的工作示例

【参考方案2】：

你可以使用 CSS：

.legendLinear text.label 
   fill: '#fff'

【讨论】：

对我不起作用，图例标签仍然是黑色文本

你确定吗，似乎在你提供的link 中工作。

是的；你把javascript部分放在哪里了？

你把css放在哪里了？是在 .legend 下吗？

在 legendLinear 类中，我认为没有添加任何图例类。

【参考方案3】：

只需使用：

legend.style("fill", '#fff')