Question

我想转换一下：

  var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];

分为：

 <div>
   <div>apples</div><div>red</div>
 </div>
 <div>
   <div>oranges</div><div>orange</div>
 </div>
 <div>
   <div>bananas</div><div>yellow</div>
 </div>

我知道这一定很容易，但每个解决方案最终都是嵌套的：

 <div>Apples<div>red</div></div>

我熟悉表格或列表绘图解决方案，但在实际问题中，第一个div有文本，第二个div包含图表，因此无法正常工作。

这是我最近尝试解除嵌套：

var div3 = anchor.selectAll("#mydiv")
        .data(data);

div3
        .enter().append("div")
        .attr("class","one")
        .text(function(d) { return d[0];})

div3.selectAll("#mydiv .one")
        .data(function(d) {
            return [d[1]]; })
        .enter().append("div")
        .attr("class","two")
        .text(function(d) {
            return d;})

这样做的正确方法是什么？

Answer 1

执行此操作的标准方法如下：

var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];

d3.select("body").selectAll("div.outer")
    .data(data)          // data is array with length 3
  .enter().append("div") // will append 3 divs
    .attr("class", "outer")
  .selectAll("div.inner")
    .data(function(d) { return d; })
  .enter().append("div")
    .attr("class", "inner")
    .text(function(d) { return d; });

见工作小提琴：http://jsfiddle.net/YaAkv/

您尝试过的代码存在很多问题。我建议阅读：

Thinking with Joins

Nested Selections

和其他教程： https://github.com/mbostock/d3/wiki/Tutorials

修改

如果不同的数组项具有不同的含义，则通常使用Object（http://fiddle.jshell.net/YaAkv/1/）：

var data = [{ fruit: 'apples', color: 'red'}, { fruit: "oranges", color: "orange"}, { fruit: "bananas", color: "yellow"} ]; var diventer = d3.select("body").selectAll("div.item") .data(data) .enter().append("div") .attr("class", "item"); diventer.append("div") .attr("class", "fruit") .text(function(d) { return d.fruit; }); diventer.append("div") .attr("class", "color") .text(function(d) { return d.color; });

然后输出就像：

<div class="item"> <div class="fruit">apples</div> <div class="color">red</div> </div> <div class="item"> <div class="fruit">oranges</div> <div class="color">orange</div> </div> <div class="item"> <div class="fruit">bananas</div> <div class="color">yellow</div> </div>

这也可以通过以下方式使用原始2D数组来实现（http://fiddle.jshell.net/YaAkv/2/）：

var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]]; var diventer = d3.select("body").selectAll("div.item") .data(data) .enter().append("div") .attr("class", "item"); diventer.append("div") .attr("class", "fruit") .text(function(d) { return d[0]; }); diventer.append("div") .attr("class", "color") .text(function(d) { return d[1]; });

修改

无需在变量中存储选择的解决方案：

var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]]; d3.select("body").selectAll("div.item") .data(data) .enter().append("div") .attr("class", "item") .each(function(d) { d3.select(this).append("div") .attr("class", "fruit") .text(d[0]); d3.select(this).append("div") .attr("class", "color") .text(d[1]); });

D3非嵌套选择

1 个答案: