Question

我想知道为什么当正文中存在DOM元素时，这两个代码片段会呈现不同的结果？当我只有一只＆＃34;狗＆＃34;身体中的元素老结果是 - 狗。 20 30 2 32 4 1.

但是，如果我有10个狗p元素（大于数据集长度），那么html将只给我10只狗p元素，没有任何更新。

第二个代码片段会像我期望的那样呈现正确的结果。使用数据集值更新现有的p元素。

根据我的理解，Circular view path [/login.html]: would dispatch back to the current handler URL [/login.html] again会将现有DOM元素与数据集值进行比较，并根据新数据更新DOM元素。为什么第一个不能按预期工作？

enter

第一个：

<body>
    <p>dog.</p>
    <p>dog.</p>
    <p>dog.</p>
    <p>dog.</p>
    <p>dog.</p>
</body>

第二个：

var dataset = [10,20,30,2,32,4,1];

d3.select("body")
            .selectAll("p")
            .data(dataset)
            .enter()
            .append("p")
            .text(function(d){return(d);});

Answer 1

第一个代码段仅在输入选择上运行，第二个代码段也在更新选择上运行。因此，如果存在与数据匹配的现有元素，则第一个片段将不会更改它们，而第二个片段将不会更改它们。

.data()调用会返回更新选择，您可以通过调用.enter()和.exit()来获取输入和退出选择。由于您在设置.text()时没有在第二个代码段中执行此操作，因此将对更新选择执行操作（即已存在且已与数据加上元素匹配的元素来自您之前添加了新元素的输入选择。）

D3这两种数据绑定方式有什么区别？

1 个答案: