2

単一のjson.iを使用して複数のグラフを生成する方法はありますか？1つのデータセットのみを使用できます。すべてのPタグで1つのグラフしか生成できませんが、データセットごとに1つのすべての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

データセットに基づいて動的にグラフを生成する場合は、データセットを選択範囲に結合することにより、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 に答える