javascript - 删除非 SVG slider

Question

我有 slider 的代码:

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 下拉列表的更改函数中的 slider 。对于 d3 viz 本身，我使用 d3.selectAll("svg > *").remove()。我知道这个 slider 不是 SVG 的一部分，那么我该如何删除它呢？目前，在更改下拉列表时，会在前一个 slider 下方添加一个新 slider 。是否有 d3.selectAll 语句需要放在某处？

感谢您提供任何见解!

Answer 1

D3 不限于操作 SVG 元素。事实上，D3 可以操纵该页面中的任何内容。

话虽这么说，你可以通过简单地使用:

selection.remove()

当然，selection 是包含 slider 的任何选择。

例如，您可以按元素选择...

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

... 或按 ID:

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

但是，对于您的情况，最简单的解决方案是使用您已有的选择:

slider.remove();

这是一个带有 slider 代码的演示，单击按钮:

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>