使用CSS样式D3图表

Question

为了在我的代码中保持内容和样式之间的良好分离，同时承认用D3创建图表会使线条模糊一点，我正试图找出如何用CSS完全控制D3图表的样式。例如，考虑以下创建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 + ')');

或者在哪里我创建了一个规模：

d3.scaleTime().domain(d3.extent(myData)).range([ 0, this.width ]);

在这两种情况下，我都在代码中引用样式值，即为了创建SVG图表，我必须对与样式相关的值进行硬编码。

有可能用CSS做所有这些样式等吗？

Answer 1

const link = gLink.selectAll('path')
.data(links, d => d.target.id);
const linkEnter = link.enter().append('path')
.attr('stroke-width', function (d) {
return 10;
}

尝试为线条提供笔划宽度以增加的厚度

Answer 2

您可以尽可能多地使用CSS。不过，交互式图表的要求有时并不容易。我发现最简单的解决方案是：

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

现在svg元素将具有类.chart。