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 Overflow

November 22, 2021
Category : News
Tags: css | D3.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.