Question

我有滑块的代码：

type

我想基于PHP下拉列表删除更改功能中的滑块。对于d3 viz本身，我使用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(); });。我知道这个滑块不是SVG的一部分，所以如何删除它呢？目前，在更改下拉列表时，会在上一个滑块下方添加一个新滑块。是否需要将d3.selectAll("svg > *").remove()语句放在某处？

感谢您对所有人的见解！

Answer 1

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

话虽如此，你可以通过简单地使用：

来做到这一点

selection.remove()

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

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

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

...或ID：

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

但是，在您的情况下，最简单的解决方案是使用您已经拥有的选择：

slider.remove();

这是一个包含滑块代码的演示，单击按钮：

＆＃13;

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

＆＃13;

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

＆＃13;

删除非SVG滑块

1 个答案: