1

この例に似たものを作成しようとしています: Wealth and Health of Nations :

ここに画像の説明を入力

私のデータは、例と同じように JSON ファイルから取得されますが、遷移を追加すると、バブルが重複します。ポイント A からポイント B に遷移するバブルの代わりに、2 つのバブル (ポイント A 用に 1 つ、ポイント B 用に 1 つ) を取得しています。一般に、トランジションでは、同じバブルの 2 つのデータ ポイントまたは 2 つの個別のバブルを区別することはできません。

例を見ると、補間関数と二分関数がありません。それらがどのように機能するのか、正確に何が間違っているのかを理解できていません。これが私のグラフの問題の原因ですか?

また、二等分線と補間がd3でどのように機能するかについて、誰かが私に例を教えてもらえますか?

コード：

 g = d3.select("#animation")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

      x_extent = [0, 100];
      x_scale = d3.scale.linear().domain(x_extent).range([margin + 20, width - 30]);

      y_extent = [0, 60];
      y_scale = d3.scale.linear().domain(y_extent).range([height - margin, margin]);


      r_scale = d3.scale.linear().domain([0, d3.max(jsondata, function (d) { return d.MSVMMboe; })]).range([2, 30]);

      g.selectAll("circle").data(jsondata, function (d) { return d.EffectiveDate; }).enter().append("circle")
                      .attr("cx", function (d) { return x_scale(d.PercentageComplete * 100) })
                      .attr("cy", function (d) { return y_scale(d.GPoS * 100) })
                      .attr("r", function (d) { return r_scale(d.MSVMMboe) })
                      .attr("stroke", "blue")
                      .attr("stroke-width", 1)
                      .attr("opacity", 0.6)
                      .attr("fill", "red");


                      //add transition

                      g.selectAll("circle").data(jsondata, function (d) { return d.EffectiveDate; })
                      .transition()
                      .duration(1000);
4

1 に答える 1

0

何を変更したいかをトランジションに伝えていません。たとえば、いくつかの属性の変更を追加する必要があります。例とチュートリアルについては、d3 Web サイトをご覧ください。

于 2012-10-31T09:19:00.687 に答える