更改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/