Button ouside d3.js Svg zum Auswählen und Ändern d3.js Elemente

Question

Ich habe SVG-Grafik über d3.js generiert, und klicken Sie auf Ereignisse mit DOM von d3.js erzeugt funktioniert, aber ein DOM außerhalb D3.js preparated einfach Feuer der Veranstaltung nicht

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

Offensichtlich #vslCur_btn0 außerhalb des svg existiert. Wenn selectAll("svg") Sie stört, gibt es mehrere absolute Position svgs innerhalb einer div, die als eine Art Leinwand (Google Maps) dient, #vslCur_btn0 existiert außerhalb dieser Leinwand und ist eine Art Systemsteuerung. die Fragen ist

1. Warum behandelt #vslCur_btn0 außerhalb Umfang
2. d3js Wie dieses Umfangs Problem außer Kraft zu setzen und auf ‚Außenseiter‘ DOM

Answer 1

Click-Ereignisse an DOM funktioniert durch d3 erzeugt .js funktionieren, aber ein zuvor erstelltes DOM außerhalb von d3.js löst das Ereignis einfach nicht aus.

Das ist falsch, es feuert. Das Problem scheint hier die Verwendung von this zu sein.

In Ihrer Funktion verwenden Sie this, um den Stil eines gegebenen SVG-Elements zu ändern. Das Problem ist, wenn Sie auf die Schaltfläche klicken, this ist die Schaltfläche selbst, nicht das SVG-Element.

Hier ist eine Geige Demo, die eine Funktion auf Klick ruft den Radius des Kreises zu protokollieren: https://jsfiddle.net/gerardofurtado/42yLuhfb/

ich das gleiche Muster in Ihrem Code verwenden:

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

den Kreis klicken Klicken Sie zuerst auf die Schaltfläche und vergleichen Sie die Ergebnisse. Achten Sie auf die Konsole, es protokolliert this und die r. Für die Taste ist das r Ergebnis natürlich null

PS: ich eher SO anstelle eines externen Link (JSfiddle) Snippet verwenden würde, aber leider SO Schnipsel Einfrieren, wenn wir versuchen, console.log this.