更改 D3 图表中轴线的颜色

Question

我正在尝试将轴更改为红色，我尝试了几种方法来做到这一点按照这个 link Blocks.org Example

我尝试使用 'class' 属性（参见下面的 main.css）以及 'stroke' 和 'fill' 属性。但其中 none 似乎有效。它仅适用于轴的文本标签。请参阅下面的代码和图表截图。

谁能赐教一下？

 d3.json("https://dummjsondata",
            function(data) {
                console.log(data);
                // Add X axis --> it is a date format
                var x = d3.scaleTime()
                    .domain(d3.extent(data, function(d) {
                        return d3.timeParse("%Y-%m-%d")(d.date);
                    }))
                    .range([0, width]);
                svg.append("g")
                    .attr("transform", "translate(0," + height + ")")
                    // .attr("class", "axisGrey")
                    // .attr("stroke", "grey")
                    // .attr("fill", "grey")
                    .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%b")))
                    .selectAll("text")
                    .attr("y", 0)
                    .attr("x", 9)
                    .attr("dy", ".35em")
                    // .attr("stroke", "grey")
                    // .attr("fill", "grey")
                    .attr("transform", "rotate(45)")
                    .style("text-anchor", "start");

                // Add Y axis Name:
                svg.append("text")
                    .attr("text-anchor", "end")
                    .attr("x", -25)
                    .attr("y", height * 0.5)
                    .attr("stroke", "red")
                    .text("%")


                // Add X axis Name:
                svg.append("text")
                    .attr("text-anchor", "end")
                    .attr("x", window.innerWidth * 0.5)
                    .attr("y", height * 1.05)
                    .attr("stroke", "red")
                    .text("Time")

                // Add Y axis
                var y = d3.scaleLinear()
                    .domain([Math.min(20, d3.min(data, function(d) {
                        return +d.TFX;
                    })), Math.max(80, d3.max(data, function(d) {
                        return +d.TFX;
                    }))])
                    // .domain([0, 100])
                    .range([height, 0]);
                svg.append("g")
                    // .attr("class", "axisGrey")
                    // .attr("stroke", "grey")
                    // .attr("fill", "grey")
                    .attr("class", "axisGrey")
                    .call(d3.axisLeft(y));

main.css:

.axisGrey line {
  stroke: rgb(173, 63, 63);
}
.axisGrey path {
  stroke: rgb(197, 40, 40);
}
    
.axisGrey text {
  fill: rgb(212, 36, 36);
}

我改代码如下

        const textColor = "rgb(230, 230, 230)"
        const opacValue = 1.0


        const xScale = d3.scaleTime().domain(d3.extent(data, function(d) {
            return d3.timeParse("%Y-%m-%d")(d.date);
        })).range([0, width]);
        const yScale = d3.scaleLinear().domain([Math.min(20, d3.min(data, function(d) {
            return +d.TFX;
        })), Math.max(80, d3.max(data, function(d) {
            return +d.TFX;
        }))]).range([height, 0]);


        const xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%b"))
        const yAxis = d3.axisLeft(yScale)

        const gXAxis = svg.append("g").attr("transform", "translate(0," + height + ")")
        const gYAxis = svg.append("g")

        gXAxis.call(xAxis)
        gYAxis.call(yAxis)

        gYAxis.selectAll('.tick line').attr('opacity', opacValue).attr('stroke', textColor)
        gYAxis.selectAll('.domain').attr('opacity', opacValue).attr('stroke', textColor)
        gYAxis.selectAll('.tick').attr('opacity', opacValue).attr('stroke', textColor)
        gYAxis.append("text").attr("text-anchor", "end").attr("x", -25).attr("y", height * 0.5).attr("stroke", textColor).text("%")

        gXAxis.selectAll('.tick line').attr('opacity', opacValue).attr('stroke', textColor)
        gXAxis.selectAll('.domain').attr('opacity', opacValue).attr('stroke', textColor)
        gXAxis.selectAll('.tick').attr('opacity', opacValue).attr('stroke', textColor)
        gXAxis.selectAll('text').attr("y", 0).attr("x", 9).attr("dy", ".35em").style("text-anchor", "start").attr("transform", "rotate(45)")
        gXAxis.append("text").attr("text-anchor", "end").attr("x", innerWidth * 0.5).attr("transform", "translate(0," + 30 + ")").attr("stroke", textColor).text("Time")

Answer 1

首先，将轴的代码与其部分分开：

const axisBottom = d3.axisBottom(x)
  .tickFormat(d3.timeFormat("%b"));

const axisBottomG = svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(axisBottom);

axisBottomG.classed('axisGrey', true);

axisBottomG.selectAll("text")
  .attr("y", 0)
  .attr("x", 9)
  .attr("dy", ".35em")
  .attr("transform", "rotate(45)")
  .style("text-anchor", "start");

然后，检查 (F12) 轴 <g> 元素以确保它具有 axisGrey class 并且也具有 class 样式。

更改 D3 图表中轴线的颜色

Changing the color of an axis line in a D3 chart

css

svg

d3.js