我想转换一下:
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;})
这样做的正确方法是什么?
答案 0 :(得分:2)
执行此操作的标准方法如下:
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/
您尝试过的代码存在很多问题。我建议阅读:
和其他教程: 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]);
});