D3.js D3JS选择和类

是否有一种简单的方法来扩展以下代码段，以便在不存在时自动创建

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：

/** 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;
        });

/**以编程方式追加HTML占位符**/
占位符=d3。选择（“主体”）。追加（“div”）。属性（“类”、“某个类”）；
/**将数据绑定到DOM**/
/**告诉D3你想要什么，而不是告诉D3怎么做：如果没有，这将返回一个虚拟选择**/
占位符。选择全部（“p”）
.数据（[1,2,3]）
.输入（）
.附加（“p”）
.文本（功能（d，i）{
返回“索引：+i+”，值：+d；
});

---

有没有更短/更好的方法

你这样做是正确的。通常，以编程方式将类添加到以编程方式创建的节点中。例如，您正在创建新的

元素，以便在需要时在其中添加一个类：

placeholder.selectAll("p")
    .data([ 1, 2, 3 ])
    .enter()
    .append("p")
        .attr("class", "myclass")   <-- add class here
        .text(function (d, i) {
            return "index: " + i + ", value: " + d;
        });

占位符。选择全部（“p”）
.数据（[1,2,3]）
.输入（）
.附加（“p”）
.attr（“class”、“myclass”）如果我理解正确，您会问如果它不存在，如何追加
div.someClass
。这有一个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

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

这是可重用组件中的一种相当常见的模式，这些组件将在更新时重复调用-请参阅以获取示例