更改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中是無效的。所以，你有兩個問題。

追加文本到sets選擇將工作：

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

這是你的小提琴，點擊頂部的文本和檢查控制檯：https://jsfiddle.net/0x7emgnt/