按钮位于d3.js svg外部，以选择和修改d3.js元素

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，它充当某种画布(google )，#vslCur_btn0存在于画布之外，是某种控制面板。问题是

1. 为什么d3js将#vslCur_btn0视为外部作用域
2. 如何覆盖此范围问题并使其在“局外人”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：我宁愿使用这样的代码片段，而不是外部链接(JSfiddle)，但不幸的是，当我们尝试使用console.log this时，代码片段已经冻结了。