除去非SVG滑塊

Question

我有代碼滑塊：

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(); 

    }); 

我想基於PHP的下拉改變功能中刪除滑塊。對於d3 viz本身，我使用d3.selectAll("svg > *").remove()。我知道這個滑塊不是SVG的一部分，所以我如何刪除它？目前，在更改下拉菜單時，會在上一個滑塊下方添加一個新的滑塊。是否有需要放置在某個地方的d3.selectAll聲明？

非常感謝您的光臨！

Answer 1

D3不限於操縱SVG元素。事實上，D3可以處理該頁面中的任何內容。

話雖這麼說，你可以做到這一點通過簡單的使用：

selection.remove() 

其中selection，當然，包含滑塊的任何選擇。

例如，你可以通過元素選擇...

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

...或ID：

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

但是，在你的情況下，最簡單的辦法是使用你的選擇已經有：

slider.remove(); 

這裏是你的代碼F演示或滑動，點擊按鈕：

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>