d3：根據數據中的整數添加多個元素

從我的理解你應該不需要與d3循環。

如果我有以下數據：

[ 
    { 
    "title": "mine", 
    "shapes" : { 
     "circle" : 15, 
     "square": 20 
    } 
    }, 
    { 
    "title": "yours", 
    "shapes": { 
     "circle": 2, 
     "square": 18 
    } 
    } 
]

我怎麼追加15圈和20個平方？

我知道如何爲對象中的每個項目追加一個元素，但不知道如何在對象中使用整數。

任何指導將不勝感激！

來源

2017-07-07 fronty

另外，下面是關於循環與輸入，更新，退出循環的使用的一個很好的討論：https://stackoverflow.com/a/44395461/7106086 –

d3數據流水線的目的是爲了避免不必要的顯式循環和過程代碼。循環仍然有一席之地。

但是讓我們說你想成爲慣用的，而不是循環。那麼當你需要的是d3.range()。它將一個整數綁定到一個列表中。例如。 d3.range(4) == [0, 1, 2, 3]。如果你想通過管道，有一個整數，需要爲每個價值元素，直到該整數，關鍵片段是：

g.selectAll('circle') 
.data(d => d3.range(d.shapes.circle)) 
.enter() 
.append('circle')

其轉換圈子數據項進來到的數很多圈子。不幸的是，這不是相當於，這在實踐中很簡單。你正在處理一個多層次的結構，你可能不想只產生N個不同的圓圈，而是根據一些更高級別的上下文來改變這些圓圈。因此，在實踐中它更像是：

g.selectAll('circle') 
.data((d, i) => d3.range(d.shapes.circle) 
        .map(j => [i, j])) 
.enter() 
.append('circle')

也就是說，你的數據陣列中第i個記錄，反饋的數據建立的社交圈結合我的J從d3.range()未來的價值。

完整的代碼比這裏舒適一點，但here's a live example on Plunker。

顏色由在輸入數據的順序選擇;隨機選擇形狀定位和不透明度。

來源

2017-07-07 17:27:17

真棒，非常感謝您的詳盡答案和示例在Plunker！我現在有我的圈子正確生成:) 我收到錯誤「無法讀取屬性」長度未定義「的數據函數有很多困難。我的真實數據實際上比我在問題中使用的示例嵌套得多。我發現，寫作：。數據（函數（d，i）的{d3.range（d.shapes.circle）.MAP（J => [I，J]）;}）導致錯誤在你的例子中寫作：（d，i）=> d3.range（d.shapes.circle）不是！我以爲只是一個短手。 – fronty

對於胖箭頭函數替換常規函數的問題是純JS，而不是D3。你錯過了一個'返回'。胖箭頭函數就像Python中的lambda函數：不需要顯式返回。 '（d，i）=>'whatever''隱含地返回''whatever''。如果你想要一個經典的函數，你需要顯式地返回：'function（d，i）{return'whatever'}'。或者在你的情況下，'返回d3.range（...'。 –

d3：根據數據中的整數添加多個元素

回答

相關問題