将数据绑定到基于对象属性的现有元素数

Binding data to existing number of elements based on object property

本文关键字：属性 元素 对象 数据绑定 于对象      更新时间：2023-09-26

我有 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>没有类。

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

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

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

如果您有任何其他问题，请告诉我！

相关文章：