Question

我有通过d3.js生成的svg图，并且点击附加到由d3.js生成的DOM的事件，但是d3.js之外的预创建的DOM根本不会触发事件

//d3.js generated DOM
var marker = layer.selectAll("svg")
                .data(data)
                .each(transform) // update existing markers
                .enter().append("svg")
                .each(transform)
                .attr("class", function (d) {
                    return d[12] === "Region" ? "marker region" : "marker";
                });

//pre-created DOM
var btn = d3.select('#vslCur_btn0');

//method i'd like to trigger on click
var hideAct = function(){
                console.log("trying to hide"+marker.size());
                marker.filter(function (d) {
                    return d[12] === "Region";
                }).style("width", function (d) {
                    console.log('attr lulz:' + d3.select(this).style('width'));
                    return d3.select(this).style('width') === '70px' ? '0px' : '70px';
                });                
        };  

marker.on("click", hideAct);//works when clicked displays "trying to hide295" or the number of svg
btn.on("click", hideAct);//does not work but displays "trying to hide0" on console

显然，#vslCur_btn0存在于svg之外。如果selectAll("svg")困扰你，div中有多个绝对位置svgs作为某种画布（谷歌地图），#vslCur_btn0存在于该画布之外，并且是某种控制面板。问题是

为什么d3js将#vslCur_btn0视为外部范围
如何覆盖此范围问题并使其适用于'outsider'DOM

Answer 1

点击附加到由d3.js工作生成的DOM的事件，但d3.js之外的预先创建的DOM根本不会触发事件。

这是错误的，它确实是火。这里的问题似乎是使用this。

在hideAct函数中，您正在使用this来更改给定svg元素的样式。问题是，当您单击按钮时，this是按钮本身，而不是SVG元素。

这是一个小提琴演示，在点击时调用一个函数来记录圆的半径：https://jsfiddle.net/gerardofurtado/42yLuhfb/

我在你的代码中使用相同的模式：

circles.on("click", test);//clicking on the SVG element
d3.select("#btn").on("click", test);//clicking on the HTML button

首先单击圆圈，然后单击按钮，比较结果。注意控制台，它会记录this和r。对于该按钮，r结果当然是null

PS ：我宁愿使用SO片段而不是外部链接（JSfiddle），但遗憾的是，当我们尝试console.log this时，SO片段会冻结。

button ouside d3.js svg选择和修改d3.js元素

1 个答案: