D3のタグクラウドでclickイベントを使用することはできますか？クリックイベントについて

D3-cloudが「あなた」、D3のタグクラウドで、どのようにD3のタグクラウドでclickイベントを使用することはできますか？クリックイベントについて

<!DOCTYPE html> 
<meta charset="utf-8"> 
<script src="../lib/d3/d3.js"></script> 
<script src="../d3.layout.cloud.js"></script> 
<body> 
<script> 
    var fill = d3.scale.category20(); 
    var zz= ["Hello", "world", "normally", "you", "want", "more", "words", "than", "this"]; 
    d3.layout.cloud().size([300, 300]) 

     .words((zz).map(function(d) { 
     return {text: d, size: 10 + Math.random() * 90}; 
     })) 
     .rotate(function() { return ~~(Math.random() * 2) * 90; }) 
     .font("Impact") 
     .fontSize(function(d) { return d.size; }) 
     .on("end", draw) 
     .start(); 

    function draw(words) { 
    d3.select("body").append("svg") 
     .attr("width", 300) 
     .attr("height", 300) 
     .append("g") 
     .attr("transform", "translate(150,150)") 
     .selectAll("text") 
     .data(words) 
     .enter().append("text") 
     .style("font-size", function(d) { return d.size + "px"; }) 
     .style("font-family", "Impact") 
     .style("fill", function(d, i) { return fill(i); }) 
     .attr("text-anchor", "middle") 
     .attr("transform", function(d) { 
      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
     }) 
     .text(function(d) { return d.text; }); 
    } 
</script>

（私が欲しい「こんにちは」、「世界」、「通常」はい場合は、イベントをクリックし使用することが可能であることはできクリック可能にする「この」言葉）

出典

2013-01-17 Nilesh1021

"タグクラウド"（つまり、どのような実装、例？）私たちはあなたにそれ以上の詳細を与えることはできません。 –

はちょうどあなたのスクリプトの末尾に以下を追加し、「より」、「言葉」、「欲しい」、「よりも、」：

あなたがバインドできる

... 
.text(function(d) { return d.text; }) 
.on("click", function(d) { 
    alert(d.text); 
    });

出典

2013-01-18 11:02:06 PhoebeB

クラスタマップにd3.jsを使用することに興味があります。ノード内にアンカータグを付けたりネストしてクリック可能にすることは可能ですか、それとも単にクリックイベントを使用してそれらを処理するのですか？ – SCS

.onでのイベント

私はあなたの質問への答えはイエスほぼ確実ですが、なしのときにマウスホバリングタグのサイズを拡大または縮小する方法を紹介します、と（私はコーヒーのスクリプトを使用しています）タグをクリックすると、ログに記録する

.on("mouseover", -> 
    d3.select(this).style("font-size", (d) -> 
    d.size + 10 +"px" 
) 
.on("mouseout", -> 
    d3.select(this).style("font-size", (d) -> 
    d.size - 10 +"px" 
) 
.on("mousedown", -> 
    console.log(this)

出典

2013-12-10 21:26:00 Luchux

D3のタグクラウドでclickイベントを使用することはできますか？クリックイベントについて

答えて

関連する問題