Question

我添加了一个新变量，我附加了一个onclick函数来初始化＆＃34;关键字＆＃34;到新的变量。但它似乎不起作用。我试图用选定的矩形关键字标签初始化变量 fiddle

我用它来做同样的事。

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

Answer 1

您粘贴的这段代码将工作，这不是问题。当您使用适当的缩进分析整个块时，实际问题是可见的：

.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);
})

click处理程序中有mouseover处理程序，没有任何意义。所以，如果你为此改变它应该工作：

.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/

在d3

1 个答案: