第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

路徑交叉導致它們的某些部分消失 [D3 路徑生成]

路徑交叉導致它們的某些部分消失 [D3 路徑生成]

UYOU 2022-09-29 17:24:39
我一直試圖在SVG上生成兩條路徑,但似乎其中一條路徑略有消失。我想知道是什么導致了這個問題。我嘗試過使用不同的路徑繪制公式,但沒有運氣。代碼非常簡單,如下所示:     import * as d3 from "d3";     let canvas =  d3.select('#canvas');        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')
查看完整描述

1 回答

?
白豬掌柜的

TA貢獻1893條經(jīng)驗 獲得超10個贊

如果將路徑的屬性設置為橙色并降低不透明度,則所看到的行為的原因應該會變得更加明顯:fill

http://img1.sycdn.imooc.com//6335647d0001d6fa03840149.jpg

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>



查看完整回答
反對 回復 2022-09-29
  • 1 回答
  • 0 關(guān)注
  • 109 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號