6

私はバブル グラフに取り組んでおり、各円にクリック イベントを追加しました。円をクリックすると、バブル グラフがより詳細な情報を表す新しいグラフに置き換えられます。

コードの一部を次に示します。

svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return scaleX(d[2]);
               })
               .attr("cy", function(d) {
                    return scaleY(100 - d[1]);
               })
               .attr("r", function(d) {
                    return d[1];
               })
               .attr("fill", "#4eb157")
               .attr("stroke", "#00c4d4")
               .attr("stroke-width", function(d) {

                    return d[1]*(1-d[2]/100)*1.5;

               })
               .on("click", function ()
                                    {


                                       svg.selectAll("circle")
                                       .data(new_dataset)
                                       .enter()
                                       .append("circle")
                                       .attr("cx", function(d) {
                                            return scaleX(d[2]);
                                       })
                                       .attr("cy", function(d) {
                                            return scaleY(100 - d[1]);
                                       })
                                       .attr("r", function(d) {
                                            return d[1];
                                       })
                                       .attr("fill", "#4eb157")
                                       .attr("stroke", "#00c4d4")
                                       .attr("stroke-width", function(d) {

                                            return d[1]*(1-d[2]/100)*1.5;

                                        });             


                                    svg.selectAll("text")
                                       .data(new_dataset)
                                       .enter()
                                       .append("text")
                                       .text(function(d) {
                                            return d[0];
                                       })
                                       .attr("x", function(d) {
                                            return scaleX(d[2]);
                                       })
                                       .attr("y", function(d) {
                                            return scaleY(100 - d[1]);
                                       })
                                       .attr("font-family", "sans-serif")
                                       .attr("font-size", "11px")
                                       .attr("fill", "red");
                                    });

円をクリックすると問題が発生し、グラフ全体が消えますが、新しいグラフは視覚化されません。オン クリック機能の実行中に、svg オブジェクトが初期状態から変更され、特に baseURI、clientHeight、clientWidth などのプロパティの一部が、最初に svg を作成したときでも設定されていないことがわかりました。物体。svg オブジェクトを作成するコードは次のとおりです。

var svg = d3.select("body").append("svg")
                    .attr("width", w)
                    .attr("height", h);

私の質問は、なぜ新しいグラフが表示されないのですか? これは、svg オブジェクトのプロパティが変更されたためですか? 新しいグラフを正常に視覚化するには、クリック機能で何を変更する必要がありますか?

ありがとう！

4

1 に答える 1

4

問題は、要素onclickの下にあるすべての円を選択し、それらを。で結合している場合です。別の円要素のセットを選択して、この円のグループに参加することをお勧めします。これを行う1つの方法は、の下に2つのグループを作成することです。1つは元のセット用、もう1つはの円用です。別の解決策は、異なるクラスを異なる円のグループに割り当て、クラスを使用して各選択を絞り込むことです。svgnew_datasetnew_datasetsvgnew_dataset

次のリンクで、結合メカニズムに関するより明確な説明を見つけることができます。

于 2012-12-07T10:36:59.497 に答える