按鈕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元素

回答

相關問題