Style D3 chart with CSS
Aiming to keep good separation of concerns between content and styling in my code, while acknowledging that creating charts with D3 blurs the lines a little, I am trying to figure out how to fully control the styling of a D3 chart with CSS. For example, consider the following where I create my SVG:
d3.select(container).append('svg') .attr('id', 'mySvg') .attr('width', window.innerWidth) .attr('height', window.innerHeight). .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
Or where I create a scale:
d3.scaleTime().domain(d3.extent(myData)).range([ 0, this.width ]);
In both cases I am referencing style values in the code, i.e. in order to create my SVG chart I have to hardcode style-related values.
Is it possible to do all of this styling etc. with CSS?
Source: CSS – Stack OverflowNovember 22, 2021