d3.js - define grid line style with javascript - d3.js

Question

I prefer to use javascript to draw graph without css file since it's more easy to copy one file here and there!
But I don't know how to translate grid line css to javascript!
Thanks if anyone can help! (grid line and grid path commented out now in css file)
console.clear()
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var valueline = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var datacsv = `date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98
`
var data = d3.csvParse(datacsv);
// Get the data
// d3.csv("data.csv").then(function(data) {
// process(data)
// });
process(data)
function process(data) {
var parseTime = d3.timeParse("%d-%b-%y");
data.forEach(function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// add the X gridlines
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(
d3.axisBottom(x)
.ticks(5)
//.tickSize(-height) xaxis grid line
.tickFormat("")
)
// add the Y gridlines
svg.append("g")
.attr("class", "grid")
.call(
d3.axisLeft(y)
.ticks(5)
.tickSize(-width)
.tickFormat("")
)
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline)
.attr('fill', 'none')
.attr('stroke','steelblue')
.attr('stroke-width',2)
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
}
/*
.grid line {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
*/
<script src="https://d3js.org/d3.v6.min.js"></script>

Answer 1

The d3 selection.style() method sets the style attribute of a given tag - allowing you to specify css style attributes. d3.selectAll() can be passed a css selector string, so this is:
.grid line {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
Is similar to:
d3.selectAll(".grid line")
.style("stroke","lightgrey")
.style("stroke-opacity",0.7)
.style("shape-rendering","crispEdges")
d3.selectAll(".grid path")
.style("stroke-width",0)
I say similar as the major difference is that by using .style() the elements have to already exist (otherwise we can't select them in order to modify them). So we could just place the above after the point you call the axis so we know the elements exist already:
console.clear()
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var valueline = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var datacsv = `date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98
`
var data = d3.csvParse(datacsv);
// Get the data
// d3.csv("data.csv").then(function(data) {
// process(data)
// });
process(data)
function process(data) {
var parseTime = d3.timeParse("%d-%b-%y");
data.forEach(function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// add the X gridlines
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(
d3.axisBottom(x)
.ticks(5)
//.tickSize(-height) xaxis grid line
.tickFormat("")
)
// add the Y gridlines
svg.append("g")
.attr("class", "grid")
.call(
d3.axisLeft(y)
.ticks(5)
.tickSize(-width)
.tickFormat("")
)
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline)
.attr('fill', 'none')
.attr('stroke','steelblue')
.attr('stroke-width',2)
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
d3.selectAll(".grid line")
.style("stroke","lightgrey")
.style("stroke-opacity",0.7)
.style("shape-rendering","crispEdges")
d3.selectAll(".grid path")
.style("stroke-width",0)
}
/*
{
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
*/
<script src="https://d3js.org/d3.v6.min.js"></script>