Question

嗨，我是d3和html以及其他所有东西的新手，我试图构建一个简单的条形图，但是我想自定义出现在x轴上的类别的颜色，这是我想要的每个类别都有自己的颜色，就像每个栏都有自己的颜色一样。我可以像这样更改他的文字

        this.xAxis.style({
            "font-size": d3.min([height, width]) * BarChart.Config.xAxisFontMultiplier,
            "fill": settings.enableAxis.fill,
        });

但是每个标签有什么办法吗？我看到了有关创建tspan属性的信息，但我不知道如何以这种方式将其应用于轴。

任何帮助将不胜感激。

Answer 1

您可以在轴上添加一个类名，并选择其中的text svg元素以应用颜色规则：

JS:
svgSelection
    .append('g')
    .attr('class', 'chart-labels')
    .call(yAxis);

 CSS:
.chart-labels text {
    color: red
}

Answer 2

绘制轴后，您必须找到xAxis的所有文本元素，并根据标签的文本设置{ "Sid": "S3ObjectPolicy", "Effect": "Allow", "Action": [ "s3:GetObject", "s3:List*" ], "Resource": ["arn:aws:s3:::my_bucket", "arn:aws:s3:::my_bucket/*"] }。

select ServiceID, FName, LName,
       max(case when Servicetpe = 'ST1' then 'X' end) ST1,
       max(case when Servicetpe = 'ST2' then 'X' end) ST2,
       max(case when Servicetpe = 'ST3' then 'X' end) ST3
from table t
group by ServiceID, FName, LName;

fill是功能到颜色的映射键。用于为条形着色的功能。

有什么方法可以自定义svg元素上的轴上的文本颜色？

2 个答案: