為了在我的代碼中保持內容和樣式之間關注點的良好分離，同時承認使用 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 完成所有這些樣式等？
uj5u.com熱心網友回復：
const link = gLink.selectAll('path')
.data(links, d => d.target.id);
const linkEnter = link.enter().append('path')
.attr('stroke-width', function (d) {
return 10;
}
嘗試為線條提供描邊寬度以增加粗細
uj5u.com熱心網友回復：
您可以盡可能多地使用 CSS。互動式圖表的要求有時并不容易。我發現最簡單的解決方案是：
d3.select(container).append('svg')
.attr('id', 'mySvg')
.classed('chart', true)
現在 svg 元素將具有類.chart.
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/364532.html