D3数据与容器连接

Question

How do I properly do data joins with wrapper elements on some of the levels? For instance, say I have the data [[a,b],[x,y]] and I want to transform it to this:

<wrapper1>
  <content1>
    <wrapper2>
      <content2>a</content2>
    </wrapper2>
    <wrapper2>
      <content2>b</content2>
    </wrapper2>
  </content1>
</wrapper1>
<wrapper1>
  <content1>
    <wrapper2>
      <content2>x</content2>
    </wrapper2>
    <wrapper2>
      <content2>y</content2>
    </wrapper2>
  </content1>
</wrapper1>

Is there a standard way to create elements with this structure?

Answer 1

Here is a code that creates that exact tree structure.

The outerSelection uses as data the outer array, which has 2 elements: [a, b] and [x, y] .

Then, the innerSelection uses as data the inner arrays, each one containing two elements: "a" and "b" for the first one and "x" and "y" for the second one.

Click "Run conde snippet" and look at your console (the console of your browser, which you can expand, not the snippet's one):

 var body = d3.select("body"); var data = [ ["a", "b"], ["x", "y"] ]; var outerSelection = body.selectAll(null) .data(data) .enter() .append("wrapper1") .append("content1"); var innerSelection = outerSelection.selectAll(null) .data(function(d) { return d }) .enter() .append("wrapper2") .append("content2") .html(function(d) { return d }) console.log(body.node()) 

 <script src="https://d3js.org/d3.v4.min.js"></script> 

Answer 2

You can achieve this by using the d3 'data' function. As you have two levels of data here, this is how I would do it:

data = [['a','b'],['x','y']];

d3.select("#div1")
  .selectAll("wrapper1")
  .data(data)
  .enter().append("wrapper1")
  .attr("d", function (d) {
  d3.select(this)
    .selectAll("content1")
    .data(d)
    .enter().append("content1")
    .attr("d", function (d2) {
    d3.select(this)
      .append("wrapper2")
      .append("content2")
      .html(d2);
  })
});

JSFiddle