d3.js - D3JS 选择和类

Question

有没有一种简单的方法可以扩展下面的一段代码，以便在 div.someclass 不存在时自动创建它？

d3.select("body").select("div.someclass").selectAll("p")
    .data([ 1, 2, 3 ])
    .enter()
        .append("p")
        .text(function (d, i) {
            return "index: " + i + ", value: " + d;
        });

我仍处于学习 D3JS 的早期阶段。到目前为止，我对它的理解是“与其告诉 D3 如何做某事，不如告诉 D3 你想要什么”。所以我很惊讶地看到上面这段代码需要在 HTML 中声明 <div class="someclass"></div>。

另一种方法是以编程方式插入 div:

/** Append HTML placeholder programmatically **/
placeholder = d3.select("body").append("div").attr("class", "someclass");

/** Bind the data to the DOM **/
/** instead of telling D3 how to do something, tell D3 what you want: in the absence of <p>, this will return a virtual selection **/
placeholder.selectAll("p")
    .data([ 1, 2, 3 ])
    .enter()
        .append("p")
        .text(function (d, i) {
            return "index: " + i + ", value: " + d;
        });

有没有更短/更好的方法？

Answer 1

如果我理解正确，您会问如何附加 div.someClass IFF 它不存在。对此有一个 D3 模式，尽管它有点奇怪:

// create a selection for the container with a static 1-element array
var container = d3.select("body").selectAll("div.someclass")
    .data([0]); 

// now add it if it doesn't exist
container.enter().append('div').attr('class', 'someclass');

// now use it for the subselection
container.selectAll("p")
    .data([1, 2, 3]);

// etc

这里奇怪的部分是 .data([0]) - 0 是常规的，不是必需的；这可以是任何静态单元素数组。第一次调用时，将创建一个新元素(除非先创建了其他内容 div.someclass)。第二次，元素已经存在，所以没有 .enter() 选择，也不会追加任何内容。

这是可重用组件中相当常见的模式，旨在在更新时重复调用 - 参见 d3.svg.axis code 示例。