javascript - 根据对象属性将数据绑定(bind)到现有数量的元素

Question

我有 100 <rect>我尝试根据数据对象的属性使用 D3 选择和修改的元素。

例如:

[Object, Object]
    0: Object
        name: "john"
        count: 32
    1: Object
        name: "jane"
        count: 48

我基本上想做一些版本:

d3.selectAll(rect)
    .data(data)
    .attr('class', function(d) { return d.name });

…这样前 32 <rect>有 class="john" ，下 48 <rect>有class="jane" ，其余 20 <rect> s 没有类。

现在它只是根据对象的数量进行分类 - 即第一个 <rect>有class="john" ，第二个有 class="jane" ，其他 98 个没有类，但我不知道如何在这里实现所需的行为...

Answer 1

最好的方法可能是在创建 <rects> 时添加此类信息。 。但是，如果出于某种原因您的设置不允许您这样做，那么您应该拥有一个元素数量与 <rects> 数量相同的数组。你有的。 .data()作用于数组中的所有元素，并且每个 <rects> (在您的情况下)继承数组中每个元素中包含的信息: https://github.com/mbostock/d3/wiki/Selections#Data

现在，当您执行第二个代码块时，您仅更新到 2 <rects>因为你的数组只包含 2 个对象。然后您可以做的是创建另一个总共 100 个元素的数组，每个元素都有您想要的类:)

如果您还有其他问题，请告诉我!