代码之家 › 专栏 › 技术社区 › OverflowingTheGlass

删除非SVG滑块

svg d3.js css html javascript

OverflowingTheGlass · 技术社区 · 7 年前

我有一个滑块的代码:

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

    });

d3.selectAll("svg > *").remove() 。我知道这个滑块不是SVG的一部分,那么我该如何删除它?当前,在更改下拉列表时,会在上一个滑块的下方添加一个新的滑块。有没有 d3.selectAll 需要放在某处的声明?

谢谢你们的洞察力!

1 回复 | 直到 7 年前

Gerardo Furtado 7 年前

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

也就是说,您只需使用:

selection.remove()

selection 当然,是包含滑块的任何选择。

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

…或通过ID:

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

已经有了 :

slider.remove();

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>