2

有没有办法使用单个 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);
4

1 回答 1

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示例

于 2013-02-15T13:57:29.463 回答