我想转换这个:
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;})
正确的做法是什么?
最佳答案
执行此操作的标准方法如下:
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; });
查看工作 fiddle :http://jsfiddle.net/YaAkv/
您尝试的代码存在很多问题。我建议阅读:
以及其他教程: https://github.com/mbostock/d3/wiki/Tutorials
编辑
如果不同的数组项具有不同的含义,通常使用对象来代替(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>
这也可以通过以下方式使用原始二维数组来实现(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.js - D3 非嵌套选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13237541/