亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

如何使用參數 ind d3.selectAll('line').each

如何使用參數 ind d3.selectAll('line').each

繁花不似錦 2021-11-12 17:18:57
我需要創建一個數組,其中包含我的 SVG 中所有行的所有端點。為此,我想用 d3-each 遍歷所有行?,F在為了理解,這個函數的參數包含什么?d3.select('svgEditor').selectAll('line').each(function(d,i){});我知道那i是索引,但d在這種情況下,始終為空。里面不應該有某種迭代元素或數據嗎?并且是迭代正確的方式還是更簡單、更快的可能,也許有一些像地圖這樣的功能?
查看完整描述

2 回答

?
慕妹3146593

TA貢獻1820條經驗 獲得超9個贊

訪問您的行的正確方法是函數內的 d3.select(this) 。d 參數是連接的數據。我不知道是否有更好的迭代方法,但 .each 函數對我有用。


以下是https://www.d3indepth.com/selections/中 .each 的示例用法:


    function addNumberedCircle(d, i) {

    d3.select(this)

        .append('circle')

        .attr('r', 40);


      d3.select(this)

        .append('text')

        .text(i + 1)

        .attr('y', 50)

        .attr('x', 30);

    }


    d3.selectAll('g.item')

      .each(addNumberedCircle);


查看完整回答
反對 回復 2021-11-12
?
幕布斯6054654

TA貢獻1876條經驗 獲得超7個贊

文檔說 .each 函數的三個參數是 (1) 數據,(2) 當前索引,以及 (3) 選擇中的節點。https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_each


在這里提供一個答案,以防萬一有人想使用 ES6 箭頭函數,或者他們在使用已接受答案中使用的“this”關鍵字時遇到問題。


在每個函數中選擇元素時使用“this”很好,但我在 SPA 應用程序中使用“this”時遇到了問題,其中“this”通常意味著其他含義,可能會讓人感到困惑。


為避免使用“this”,可以將代碼更改為:


d3.select('svgEditor').selectAll('line').each(function(d,i){

  d3.select(this).append.....

});

到:


d3.select('svgEditor').selectAll('line').each((data, i, nodes) => {

  d3.select(nodes[i]).append....

});

這篇文章有助于解釋https://medium.com/@yonester/on-d3-and-arrow-functions-b6559c1cebb8


查看完整回答
反對 回復 2021-11-12
  • 2 回答
  • 0 關注
  • 476 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號