Style D3 chart with CSS-CodePudding

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?

CodePudding user response：

const link = gLink.selectAll('path')
      .data(links, d => d.target.id);

const linkEnter = link.enter().append('path')
      .attr('stroke-width', function (d) {
          return 10;
      }

Try to provide Stroke width for the lines to increase the thickness

CodePudding user response：

You can use CSS as much as you are able. The demands of a interactive chart sometimes don't make it easy though. The simplest solution, I find is:

d3.select(container).append('svg')
    .attr('id', 'mySvg')
    .classed('chart', true)

Now the svg element will have the class, .chart.