Question

标题;我正在关注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'
}

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

Answer 1

    .axis path {
    stroke: white;
}
   .axis line {
    stroke: white;
}
   text { 
    fill: white;
}

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

这是一个引用

的工作示例

Answer 2

你可以使用CSS：

.legendLinear text.label {
   fill: '#fff'
}

Answer 3

只需使用：

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

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

3 个答案: