クリックイベントの変数値をd3で変更する

Question

新しい変数を追加しました。新しい変数に「キーワード」を初期化するonclick関数を追加しています。しかし、それはうまくいかないようです。 選択した矩形のキーワードラベルで変数を初期化しようとしています fiddle

これを使用して同じことを行っています。

    .on('click',function(d){ 
         selectedkeyword = d.keyword; 
         }); 

Answer 1

あなたは意志作品を貼り付けたコードのこの作品は、それは問題ではありません。あなたがブロック全体をanalise時に実際の問題は、適切なインデントで、表示されている：

.on('mouseover', function(d) { 
    var xPos = 70 + parseFloat(d3.select(this).attr('w')); 
    var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() + 30; 
    .on('click', function(d) {//incorrect position! 
     selectedkeyword = d.keyword; 
    }); 

    d3.select('#tooltip') 
     .style('left', xPos + 'px') 
     .style('top', yPos + 'px') 
     .style('display', 'block') 
     .select('#value') 
     .text(d.global); 

    d3.select('#tooltip').classed('hidden', false); 
}) 

あなたはmouseoverハンドラ内clickハンドラを持っており、それは意味がありません。あなたはこのために変更するのであれば、それが動作するはずです：

.on('mouseover', function(d) { 
    var xPos = 70 + parseFloat(d3.select(this).attr('w')); 
    var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() + 30; 

    d3.select('#tooltip') 
     .style('left', xPos + 'px') 
     .style('top', yPos + 'px') 
     .style('display', 'block') 
     .select('#value') 
     .text(d.global); 

     d3.select('#tooltip').classed('hidden', false); 
    }) 
.on('click', function(d) { 
    selectedkeyword = d.keyword; 
}); 

をしかし、これはない作業もあります。説明は簡単です：コードを上に行くと、テキストを四角形に追加していることがわかります。これはSVGでは有効ではありません。だから、2つの問題があります。 sets選択にテキストを追加は

は動作します：ここでは

sets.append("text") 
    //etc... 
    .on('click', function(d) { 
     selectedkeyword = d.keyword; 
     console.log(selectedkeyword); 
    }); 

は上のテキストをクリックしてコンソールをチェックし、あなたのフィドルです：https://jsfiddle.net/0x7emgnt/