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

我有通过d3.js生成的svg图形，并单击由d3.js工作生成的附加到DOM的事件，但在d3.js之外的预先创建的DOM只是简单地不发生事件按钮ouside d3.js svg选择和修改d3.js元素

//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存在于该画布之外，并且是某种控制面板。由D3生成连接到DOM的问题是

为什么d3js对待#vslCur_btn0为外范围
如何覆盖这个范围的问题，并使其在“局外人”工作DOM

来源

2016-11-15 jyonkheel

这是不正确的，SVG以外的按钮工作得很好。请粘贴您的dot_click功能。 –

对不起，这是错字，原始代码要长得多，这是简洁的版本 – jyonkheel

再次编辑了代码，添加了大小检查，注意到marker.size（）将在外部DOM上显示0，而在d3js内部DOM上显示295 – jyonkheel

点击事件.js工作，但是在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。

来源

2016-11-15 03:48:58

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

回答

相关问题