I want to change the colour of an axis for a simple d3.js (v4) graph. The y axis in the following image is an example of the finished product;
I suspect that the method I am using to achieve this a bit ugly and I believe that there should be an alternative per the description below that I do not yet understand.
The axis component is a combination of text, path and line elements which require alteration of their respective styles (stroke and fill).
At this point the only method I have found to change the colour of the components is by individually setting styles in the <style>
section of the code...
.axisRed line{
stroke: red;
}
.axisRed path{
stroke: red;
}
.axisRed text{
fill: red;
}
...and applying that class to the y axis when appending it later in the JavaScript;
svg.append("g")
.attr("class", "axisRed")
.call(d3.axisLeft(y));
Is there a way that I can apply these styles via .style("<some style>", "<some value>")
lines while appending the y axis rather than declaring in the <style>
section?
An example with code is here.
I have tried trying to address the individual DOM components such as the 'domain' class, but without success. I suspect that I do not understand the hierarchy of the axis component well enough.
On D3 you have several options to style the elements:
Option A: Using style tag with your class:
axisRed line{
stroke: red;
}
.axisRed path{
stroke: red;
}
.axisRed text{
fill: red;
}
// apply applying that class to the y
svg.append("g")
.attr("class", "axisRed")
.call(d3.axisLeft(y));
Option B: Using style tag with auto-generate class:
D3 assign domain
class for the axis line, and inside a group 'g' for every tick class tick
line and text
. Without define a particular class:
<style>
path.domain {
stroke: red;
}
.tick text {
fill:blue
}
</style
.
.
svg.append("g").call(d3.axisLeft(y));
// generate code
<path class="domain" stroke="#000" d="M-6,450.5H0.5V0.5H-6"></path>
<g class="tick" opacity="1" transform="translate(0,414)">
<line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line>
<text fill="#000" x="-9" y="0.5" dy=".32em">50</text>
</g>
Option C:Inline at appening time
On D3 V3 you could do a more compact:
svg.append("line")
.style({
fill:"none",
stroke:"#f00",
"stroke-width":"10"
})
But on D3 V4, doesn't work. So I open a 'Issue': you can check and follow the progress here: https://github.com/d3/d3-selection/issues/82
** UPDATE ** On V4 you must include selection-multi:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
and then use: styles
intead style
and attrs
instead attr
:
svg.append("line")
.styles({
fill:"none",
stroke:"#f00",
"stroke-width":"10"
})
for your example:
svg.selectAll(".domain")
.styles({ fill:"none", stroke:"#f00", "stroke-width":"1" });
Now you got a compact way to style your elements
Extra: you could style and attr any elements:
var svg = d3.select("body").append("svg")
.attrs({width:600, height:600})
.styles({
border:"1px",
"border-style":"solid",
"border-color":"#f00"})