D3を使用してJavaScript変数をテキストとして表示するには

javascriptを初めて使用しています。私はいくつかのグラフを構築するためにD3を使用しています。私は、SVG要素にマウスクリック数を表示したいと思っています。D3を使用してJavaScript変数をテキストとして表示するには

現在、私は楕円を表示することができ、楕円上のクリック数を追跡できます。私は楕円にマウスクリックの変化する数を重ねたいと思っています。

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

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

<!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（クリック）に追加しようとしたが、それはうまくいきませんでした。

さらに一般的な質問として、テキスト（varクリック）をsampleSVG に追加するか、新しい変数sampleTextを作成してsampleSVGにオーバーレイする必要がありますか？ sampleSVG.text(clicks)言っヘルプ

出典

2012-04-07 RSolis

ため

おかげで外側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-11 16:23:41 mbostock

D3を使用してJavaScript変数をテキストとして表示するには

答えて

関連する問題