javascript - D3 为单个 json 生成多个图

Question

有没有一种方法可以使用单个 json 生成多个图。我只能使用一个数据集。我只能在所有 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