4

最初の棒グラフの作成に成功しました。次に、トランジションを使用して既存のグラフにバーを追加し、優れたユーザー エクスペリエンスを実現したいと考えています。

これが私のコードです：

var data = [23, 85, 67, 38, 70]; //dummy, normally much more
labellist = ['label1','label2','label3','label4','label5'];

var w = 815,
    h = 500,
    labelpad = 165,
    x = d3.scale.linear().domain([0, 100]).range([0, w]),
    y = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, h], .2);

mySvg = d3.select("#chart")
  .append("svg");

vis = mySvg.attr("width", w + 40)
    .attr("height", h + 20)
    .append("svg:g")
    .attr("transform", "translate(20,0)");

bars = vis.selectAll("g.bar")
    .data(data)
    .enter().append("svg:g")
    .attr("class", "bar")
    .attr("transform", function(d, i) { return "translate(" + labelpad + "," + y(i) + ")"; })


bars.append("svg:rect")

    .transition()
    .duration(500)
    .attr("width", x)
    .attr("height", y.rangeBand())
    ;



var rules = vis.selectAll("g.rule")
    .data(x.ticks(10))
  .enter().append("svg:g")
    .attr("class", "rule")
    .attr("transform", function(d) { return "translate(" + x(d) + ", 0)"; });

rules.append("svg:line")
    .attr("y1", h)
    .attr("y2", h + 6)
    .attr("x1", labelpad)
    .attr("x2", labelpad)
    .attr("stroke", "black");
rules.append("svg:line")
    .attr("y1", 0)
    .attr("y2", h)
    .attr("x1", labelpad)
    .attr("x2", labelpad)
    .attr("stroke", "white")
    .attr("stroke-opacity", .3);

プログラムでデータを変更して他のバーを追加および削除し、既存のバーを上下にスライドさせるにはどうすればよいですか?

4

1 に答える 1

6

d3が前のセットに存在したものを識別できるように、バーのデータに何らかの形式のキーを割り当てる必要があります。デフォルトはインデックスベースであり、それが必要な場合があります。

トランジションに関する限り、コードを次のように変更する必要があります。

bars = vis.selectAll("g.bar")
    .data(data);

bars.enter().append("svg:g")
    .attr("class", "bar")
    .append("svg:rect").

bars.transition().duration(500)
    .attr("transform", function(d, i) { 
         return "translate(" + labelpad + "," + y(i) + ")"; 
     })
    .selectAll("svg:rect")
    .attr("width", x)
    .attr("height", y.rangeBand())
;

bars.exit().transition().duration(500)
    .selectAll("svg:rect")
    .attr("height", 0)
    .remove();

「enter（）」関数は、構造をすぐに作成するために最適に使用されます。次に、初期選択オブジェクト（バー）を使用して、新しいデータをすべての要素に適用します。

また、廃止されたバーを削除することもできます。ここでは、サイズを0に変更してから削除しましたが、必要な効果を得るためにいじくり回すことができます。

于 2012-08-28T23:17:38.870 に答える