如何将多个子元素附加到d3.js中的div？

Question

我正在尝试使用以下代码将两个span附加到div：

    d3.select("#breadcrumb")
            .append("span")
            .attr("class","breadcrumb-link")
            .text(d.name)
            .append("span")
            .text("/");

但这增加了以下元素：

<div id="breadcrumb">
    <span>
        <span>
        </span>
    </span>
</div>

我想将span添加为兄弟姐妹：

<div id="breadcrumb">
    <span>
    </span>

    <span>
    </span>
</div>

我知道这可以通过首先选择div然后为每个span使用2个语句来完成。我可以在单个链式语句中执行此操作吗？

Answer 1

d3.js 基于数据驱动文档的理念。也就是说，通常情况下，您将data作为array，加入并使用选择。

考虑到这一点，您可以通过将选择d3.select("#breadcrumb")加入“人工”数组[1, 2]来尝试简单的黑客攻击。这看起来像这样：

d3.select("#breadcrumb").data([1, 2]).enter().append('span')...

请注意enter()。

的来电

如果您想设置不同的类属性，可以将这些数据填充到数据数组中。