如何根據 D3 中的數據創建元素？

Question

看樣品：

d3.select("body").selectAll("div")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
    .text(function(d) { return d; });

忍不住想知道如何使 append 對提供的數據敏感 - 說do append and fill text說if d == 8否則不要 append？

Answer 1

最簡單的方法是在調用.data( ... )之前過濾你的數組：

d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42].filter(function(d){ return d < 10; }))
  .enter().append("div")
    .text(function(d) { return d; });

將只為4和8創建一個div。

或者，您可以在將數組綁定到頁面上的元素之后篩選您的選擇，以有條件地創建子元素：

d3.select("body").selectAll("div")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
    .text(function(d) { return d; })
 .filter(function(d){ return d == 8; }).append("span")
    .text("Equal to 8")

Answer 2

在您的示例中，您想根據條件添加一些內容或不添加任何其他內容。 然而，如果你想添加一些東西但它取決於你的條件 append，那么你可以使用D3中的大多數值都可以通過常量和函數傳遞的事實。 這也適用於 function .append(... ) 。

因此，如果你想要 append 一些東西，但你想要 append 的 DOM 節點類型取決於條件，你可以使用如下內容：

d3.select("body").selectAll("div")
    .data([4, 8, 15, 16, 23, 42])
        .enter().append((d) => document.createElementNS("http://www.w3.org/2000/svg",
            d < 10 ? "rect" : "circle"))
            .text(function(d) { return d; });