entfernen Non-SVG Slider

Question

Ich habe Code für einen Schieber:

var slider = d3.select('body').append('p').text('Sent or Received Threshold: '); 

slider.append('label') 
    .attr('for', 'threshold') 
    .text(''); 

slider.append('input') 
    .attr('type', 'range') 
    .attr('min', d3.min(graph.links, function(d) {return d.value; })) 
    .attr('max', d3.max(graph.links, function(d) {return d.value; })) 
    .attr('value', d3.min(graph.links, function(d) {return d.value; })) 
    .attr('id', 'threshold') 
    .style('width', '100%') 
    .style('display', 'block') 
    .on('input', function() { 
     var threshold = this.value; 

     d3.select('label').text(threshold); 

     var newData = []; 
     graph.links.forEach(function (d) { 
      if (d.value >= threshold) {newData.push(d); }; 
     }); 

    color.domain([d3.min(newData, function(d) {return d.value; }), d3.max(newData, function(d) {return d.value; })]).interpolator(d3.interpolateBlues); 

     link = link.data(newData, function(d){ return d.value}); 
     link.exit().remove(); 
     var linkEnter = link.enter().append("path") 
         .style("stroke", function(d) { return color(d.value); }) 
         .style("fill", "none") 
         .style("stroke-width", "3px"); 
     link = linkEnter.merge(link).style("stroke", function(d) { return color(d.value); }); 

     node = node.data(graph.nodes); 

     simulation.nodes(graph.nodes) 
    .on('tick', tick) 
     simulation.force("link") 
    .links(newData); 

     simulation.alphaTarget(0.1).restart(); 

    }); 

Ich mag den Schieber innerhalb einer Änderungsfunktion auf einem PHP-Drop-down-Basis entfernen. Für die d3 viz selbst verwende ich d3.selectAll("svg > *").remove(). Ich weiß, dass dieser Schieberegler nicht Teil von SVG ist, also wie würde ich ihn entfernen? Derzeit wird bei Änderung des Dropdown-Menüs ein neuer Schieberegler unterhalb des vorherigen Schiebereglers hinzugefügt. Gibt es eine d3.selectAll Anweisung, die irgendwo platziert werden muss?

Vielen Dank für alle Einsichten, die Sie alle haben könnten!

Answer 1

D3 ist nicht auf die Manipulation von SVG-Elementen beschränkt. Tatsächlich kann D3 alles auf dieser Seite manipulieren.

Dass gesagt wird, können Sie das tun, indem Sie einfach mit:

selection.remove() 

Wo selection ist natürlich, jede Auswahl den Regler enthält.

Zum Beispiel Sie durch das Element auswählen können ...

d3.select("input").remove(); 

... oder ID:

d3.select("#threshold").remove(); 

Aber in Ihrem Fall die einfachste Lösung ist mit der Auswahl, die Sie haben bereits:

slider.remove(); 

Hier eine Demo mit Ihrem Code f oder der Schieber, klicken Sie auf die Schaltfläche:

var slider = d3.select('body').append('p').text('Sent or Received Threshold: '); 
 

 
slider.append('label') 
 
    .attr('for', 'threshold') 
 
    .text(''); 
 

 
slider.append('input') 
 
    .attr('type', 'range') 
 
    .attr('min', 0) 
 
    .attr('max', 100) 
 
    .attr('value', 30) 
 
    .attr('id', 'threshold') 
 
    .style('width', '100%') 
 
    .style('display', 'block'); 
 
    
 
d3.select("button").on("click", function(){ 
 
    slider.remove(); 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<button>Click me</button>