1

私は D3 に単純な円遷移を持っています。一意の名前を持つ約 23 の異なる円があり、それらはポイント A からポイント B に移動します。.data() のキーとして「円名」を使用しています。

Internet Explorer ではすべて正常に動作しますが、Chrome で試してみると、バブルが正しくマップされません。たとえば、トランジションが実行されると、バブル 1 はバブル 3 の色と "r" になります。最終的な位置は正しく、泡は本来あるべき場所に収まりますが、2 つの点の間ですべて混ざり合っています (塗りつぶしと "r")。

以下のコード:

 g.selectAll("circle").data(effedate, function (d) { return d.BubbleName; }).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", "black")
      .attr("stroke-width", 1)
      .attr("opacity", 0.6)
      .attr("fill", function (d) {
          if (d.FairWay == "A") {
              return "steelblue";
          }
          else if (d.FairWay == "B") {
              return "yellow";
          }
          else if (d.FairWay == "C") {
              return "lightgreen";
          }
          else {
              return "lightblue";
          }
      });

      g.selectAll('circle')
             .data(effedate).exit().remove();

      //transition
      g.selectAll("circle").data(effedate2, function (d) { return d.BubbleName; }).transition().duration(3000)
      .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", "black")
      .attr("stroke-width", 1)
      .attr("opacity", 0.6)
      .attr("fill", function (d) {
          if (d.FairWay == "A") {
              return "steelblue";
          }
          else if (d.FairWay == "B") {
              return "yellow";
          }
          else if (d.FairWay == "C") {
              return "lightgreen";
          }
          else {
              return "lightblue";
          }
      });

Google Chrome でトランジションに関する問題が発生した人はいますか?

4

1 に答える 1

0

ちょっと奇妙に聞こえますが、Chrome に問題があるとは考えにくいです。要素へのデータのマッピングに問題がある可能性が高くなります。それでも、あなたのコードはここからほとんど問題ないように見えます。

ただし、1 つ間違っています。

g.selectAll('circle')
    .data(effedate).exit().remove();// <- WRONG: missing function (d) { return d.BubbleName; }

を返すキー関数を指定する必要がありますd.BubbleName。

それが修正されない場合:d.BubbleName正しい値が得られていますか? console.logそれが使用されている関数内からでしたか？

また、 selectAll を破棄しているsvg:circle同じグループ内の他の s がある可能性があります。g

于 2012-11-18T01:10:30.423 に答える