1

私はjavascriptを初めて使用します。D3を使用していくつかのグラフを作成しています。SVG要素上でのマウスクリック数を表示したいと思います。

現在、楕円を表示し、楕円のクリック数を追跡できます。楕円上で変化するマウスクリック数をオーバーレイしたいと思います。

初期変数が表示されるように動作していますが、変数の変更を表示する方法（つまり、追加のマウスクリック）を解決できませんでした。楕円をクリックするとすぐにテキストが更新されるようにしたいと思います。

私のコードは以下の通りです。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
    <div id="viz"></div>
    <script type="text/javascript">
    var clicks = 0;
    var sampleSVG = d3.select("#viz")
        .append("svg:svg")
        .attr("width", 400)
        .attr("height", 800);    
    sampleSVG.append("svg:ellipse")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("rx", 20)
        .attr("ry", 25)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");})
        .on("click", function(){clicks = clicks+1
                    })
    sampleSVG.append("svg:text")
        .text(clicks)
        .attr("x", 50)
        .attr("y", 50)
        .attr("fill", "black"); 
    </script>
</body>
</html>

onclick関数にsampleSVG.text（clicks）を追加しようとしましたが、機能しませんでした。

また、より一般的な質問として、テキスト（var clicks）をsampleSVGに追加する必要がありますか、それとも新しい変数sampleTextを作成してsampleSVGにオーバーレイする必要がありますか？

助けてくれてありがとう

R

4

1 に答える 1

2

SayingsampleSVG.text(clicks)は、外側のsvg：svg要素のテキストコンテンツを設定し、含まれているすべての要素を削除します。svg：text要素のみのテキストコンテンツを設定します。クリック時にテキスト要素を選択できます。

.on("click", function() {
  clicks = clicks + 1;
  sampleSVG.select("text").text(clicks);
})

または、テキスト要素を作成するときに、その要素への参照を保存することもできます。

var sampleText = sampleSVG.append("text")
    .text(clicks)
    .attr("x", 50)

次に、クリックするとこの要素にアクセスできます。

.on("click", function() {
  clicks = clicks + 1;
  sampleText.text(clicks);
})
于 2012-04-11T16:23:41.107 に答える