1 回答

TA貢獻1893條經(jīng)驗 獲得超10個贊
如果將路徑的屬性設置為橙色并降低不透明度,則所看到的行為的原因應該會變得更加明顯:fill
SVG 路徑的默認填充顏色為黑色 - 默認情況下,無論路徑是否為閉合路徑,都會填充路徑。上面的橙色區(qū)域在您的示例中為黑色。因此,您看到的結(jié)果是由于第二條路徑的填充覆蓋了第一條路徑在其大部分長度上的筆觸。因此,只有部分行程可見。背面背景會混淆問題,但解決方案是將填充設置為:none
let canvas = d3.select('body');
let svg = canvas.append('svg')
.attr('width',1820)
.attr('height', 790)
.style('background-color', 'black')
var pathInfo = [
{
p: 'P',
data: [[0, 40], [50, 30], [100, 50], [200, 60], [300, 90]]
},
{
p:'p2',
data: [[0, 40], [50, 30], [100, 50], [200, 60], [350, 90]]
}
]
const curve = d3.line().curve(d3.curveNatural);
svg.selectAll('path')
.data(pathInfo)
.enter()
.append('path')
.attr('d', (d)=> curve(d.data)).attr('stroke', 'white').attr("fill","none");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
添加回答
舉報