user3769000 user3769000 - 2 months ago 15
CSS Question

D3 line do not read from the css file

I have been staring at this for a long time now and can't see what's wrong...

I am drawing a line graph using d3 and want to keep the styling in a separate CSS file.

Line section:

var line = d3.svg.line()
.interpolate("monotone")
.x(function(d,i) { return xScale(graph_d.TimeStamp[i]) + 0.5; })
.y(function(d) { return yScale(d) });

//Average line
chart.select("#chartarea")
.selectAll(".avgline")
.data(graph_d.Data)
.enter()
.append('path')
.attr("class", "avgline")
.attr('d', function(d) { return line(graph_d.Data); });


CSS:

.avgline
{
fill: none;
stroke-width: 2px;
stroke: "grey";
}


This code does not render any line. Other parts of the CSS file are read and are working.

When putting the style into the line section it works:

//Average line
chart.select("#chartarea")
.selectAll(".avgline")
.data(graph_d.Data)
.enter()
.append('path')
.attr("class", "avgline")
.attr('d', function(d) { return line(graph_d.Data); })
.attr('fill', 'none')
.attr('stroke-width', '1px')
.attr('stroke', 'grey');


Can you please help me?

Answer

Colours in CSS are not written in quotes so you want

.avgline
{
    fill: none;
    stroke-width: 2px;
    stroke: grey;
}