Question

有没有办法使用单个json生成多个图形.i只能使用一个数据集。我能够在所有P标签中只生成一个图，但我想在每个数据集的所有P标签中生成一个不同的图。

HTML

<p class="graph1"></p>
<p class="graph1"></p>
<p class="graph1"></p>
<p class="graph1"></p>
<p class="graph1"></p>

数据集

var dataset=[[2100, 2000, 3200],[2200, 3000, 3200],[1200, 1000, 5200],[1200, 2000, 3200],[1200, 3000, 3500]];

D3 Javascript

svg = d3.selectAll('.graph1').append("svg").attr("width",w).attr("height",h);
var rect1 =   svg.append("rect").attr("x",0).attr("y",3*h/4).attr("width",w).attr("height",rect_1_h)
        .style("fill",rect_1_color);

Answer 1

如果要基于数据集动态生成图形，可以通过将数据集与选择结合在一个语句中来完成。这可以使用函数data()完成。

例如，如果你想生成一个存储在数组中的填充颜色的矩形，你可以这样做（我只使用你的脚本使用不同的数据集）：

var dataset=[["blue"],["red"],["green"],["black"],["orange"]]; 
var rect_1_h =20;
var h =200;
var w=200;
var rects = d3.select("body").selectAll('.graph1')
 .data(dataset)
.enter().append("p").append("svg").attr("width",w).attr("height",h)
.append("rect")
 .attr("x",0)
 .attr("y",3*h/4)
 .attr("width",w)
 .attr("height",rect_1_h)
 .style("fill",function(d) { return d[0];});

这是一个jsfiddle example

D3为单个json生成多个图形

1 个答案: