在前端开发中，使用 D3.js 可以轻松地将数据转换为可视化图表。然而，在某些情况下，我们需要为每个数据成员添加多个非嵌套元素，以呈现更复杂的信息。本文将介绍如何使用 D3.js 实现这一功能，并提供示例代码。
添加单个非嵌套元素
首先，让我们回顾一下如何为每个数据成员添加单个非嵌套元素。假设我们有一个数组，其中包含三个数字：[1, 2, 3]。我们想要为每个数字创建一个圆形元素，并将其附加到某个 HTML 元素中。我们可以使用以下代码：
-- -------------------- ---- ------- ----- ---- - --- -- --- ----------------- -------------------- ----------- -------- ----------------- ----------- --- -- -- - - --- - --- ----------- --- ---------- - -- ---
上述代码通过 selectAll 方法选中所有圆形元素（由于尚不存在，因此该选择器返回空集合）。接下来，data 方法将数据与选择器进行关联。对于每个数据成员，enter 方法会创建一个新的圆形元素并将其附加到选择器中。最后，通过 attr 方法设置圆形元素的属性。
添加多个非嵌套元素
现在，让我们看看如何为每个数据成员添加多个非嵌套元素。假设我们有一个对象数组，其中每个对象都包含三个数字属性：x、y 和 z。我们想要为每个对象创建三个圆形元素，并将它们附加到某个 HTML 元素中。
首先，我们需要对每个数据成员进行多次绑定，以便为每个属性创建一个元素。我们可以使用以下代码：
-- -------------------- ---- ------- ----- ---- - - - -- -- -- -- -- - -- - -- -- -- -- -- - -- - -- -- -- -- -- - -- -- ----- --- - ----------------- -------------- -------------- ---- --------------- ----- ----- ------- - ------------------ ----------- -------- ------------ -------------------- ------- -- ----- ---- ----- -------- ----------------- ----------- --- -- -- - - --- - --- ----------- --- -- -- -- - - -- - --- ---------- - -- ---
上述代码首先创建一个 SVG 元素，并选中所有 <g> 元素。接下来，data 方法将数据与选择器进行关联。对于每个数据成员，enter 方法会创建一个新的 <g> 元素并将其附加到选择器中。然后，我们对每个数据成员的三个属性进行多次绑定，以便为每个属性创建一个圆形元素。最后，通过 attr 方法设置圆形元素的属性。
总结
在本文中，我们介绍了如何使用 D3.js 为每个数据成员添加多个非嵌套元素。首先，我们回顾了如何为每个数据成员添加单个非嵌套元素。然后，我们介绍了如何对每个数据成员的多个属性进行多次绑定，以便为每个属性创建一个元素。这种方法可以用于创建更复杂的可视化图表，例如
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27313