Question

我有这样的数据：

[
  {id: 1, x:10, y:20, a: 123},
  {id: 2, x:20, y:12},
]

我希望生成DOM看起来像这样：

<div style='top:20px; left: 10px'>
  <strong>1</strong>
  <span>123</span>
</div>
<div style='top:12px; left: 20px'>
  <strong>2</strong>
</div>

有没有办法根据属性的存在来追加元素？

如果新版本的数据缺少这些属性，还可以删除它们吗？

Answer 1

是的，您可以使用子选择。

这是一个生成所需DOM的函数：

function show(arr) {
    //bind data to divs
    parent = d3.select("body").selectAll("div")
        .data(arr);

    //enter-update-exit pattern used to create divs
    parent.exit().remove(); 
    parent.enter().append("div");
    parent.style({
        "top" : function (d) { return d.y} , 
        "left" : function (d) { return d.x } 
    });

    //basic subselection bind
    strong = parent.selectAll("strong")
        .data(function(d) { return [d.id]});

    //enter-update-exit 
    strong.exit().remove(); 
    strong.enter().append("strong")
    strong.text(String)

    // subselection bind that handles missing attributes      
    span = parent.selectAll("span")
        .data(function(d) { return d.a ? [d.a] : [] });

    //enter-update-exit 
    span.exit().remove();   
    span.enter().append("span")
    span.text(String)
}

我第一次打电话给show()

data1 = [
  {id: 1, x:10, y:20, a: 123},
  {id: 2, x:20, y:12},
  {id: 3, x:15, y:15},
];
show(data1);

将此附加到DOM：

<div style="top: 20px; left: 10px;">
    <strong>1</strong>
    <span>123</span>
</div>
<div style="top: 12px; left: 20px;">
    <strong>2</strong>
</div>
<div style="top: 15px; left: 15px;">
    <strong>3</strong>
</div>

然后我用

再次调用它

data2 = [
  {id: 1, x:10, y:20},
  {id: 2, x:20, y:12, a: 123}
]
show(data2);

我的DOM元素变为

<div style="top: 20px; left: 10px;">
    <strong>1</strong>
</div>
<div style="top: 12px; left: 20px;">
    <strong>2</strong>
    <span>123</span>
</div>

将数据绑定到div的块很简单。无需评论。

parent = d3.select("body").selectAll("div")
    .data(arr);

创建元素（div，strong，span）的块都是d3中enter-update-exit idiom的直接应用。我们执行退出，然后是输入，最后更新 - 这是模式的常见变体。

parent.exit().remove(); //exit
parent.enter().append("div"); //enter
parent.style({
        "top" : function (d) { return d.y} , 
        "left" : function (d) { return d.x } 
}); //update

子选择是神奇发生的地方（参见documentation for selection.data）。传递给数据的函数将接收其父div绑定的数组中的元素（例如{id: 2, x:20, y:12}）。该函数返回我们想要将子选择绑定到的任何元素（必须是数组）。对于强大的元素，我们只是抓住id并将其包装在一个数组中。

// parent datum {id: 2, x:20, y:12} becomes child data [2]
strong = parent.selectAll("strong")
            .data(function(d) { return [d.id]});

对于span元素，我们在数组存在时将该属性的值包装在内，并且当它不存在时返回一个空数组。

// parent datum {id: 1, x:10, y:20, a: 123} becomes [123] 
// parent datum {id: 2, x:20, y:12} becomes []
span = parent.selectAll("span")
        .data(function(d) { return d.a ? [d.a] : [] });

基于D3的嵌套数据有条件地附加

1 个答案: