javascript - How to change the color of a d3.js axis line - Stack Overflow

admin管理员组

文章数量:1387305

Here is my code. I want to change the color of the actual axis line from black to grey.

var xAxisCall = d3.axisBottom(x);
  g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxisCall)
    .selectAll("text")
        .attr("y", "10")
        .attr("x", "-5")
        .attr("text-anchor", "end")
        .attr("transform", "rotate(-40)")
        .style("fill", "#999999");

Here is my code. I want to change the color of the actual axis line from black to grey.

var xAxisCall = d3.axisBottom(x);
  g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxisCall)
    .selectAll("text")
        .attr("y", "10")
        .attr("x", "-5")
        .attr("text-anchor", "end")
        .attr("transform", "rotate(-40)")
        .style("fill", "#999999");

• javascript
• d3.js
• visualization

Share Improve this question Follow asked Jan 18, 2019 at 19:43 Art3misArt3mis 10911 silver badge88 bronze badges 1

• 1 add a CSS style that address the path in the g: .x.axis path { stroke:red;} – rioV8 Commented Jan 18, 2019 at 20:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

If you're using D3 v5 (and possibly v4) the default styling is now embedded at the element level, which saves you having to specify it yourself in CSS. One way to get over this is to override it with CSS's !important flag.

.x.axis line {
    stroke: gray !important;
}

Alternatively re-apply it to the elements after calling the axis using d3:

d3.selectAll(".x.axis line")
    .style("stroke","gray");

A little finessing may be required, but the principle should work.

本文标签： javascriptHow to change the color of a d3js axis lineStack Overflow