删除d3.js中的元素

Question

NewBie for d3.js.我尝试删除基于方法的xAxis

s.selectAll（“g”）。remove（xAxis）;

但它不起作用。不确定它是否是删除xAxis的正确方法？先谢谢你。

1. var xAxis = d3.axisBottom() 
    .scale(xScale); 


2. s.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 

3. s.selectAll("g").remove(xAxis); 

Answer 1

.remove()不带任何参数，它只是你可以在任何D3选择使用的方法。

要删除您必须首先选择这些功能，然后将其删除：

d3.selectAll('g').remove(); // removes all 'g' elements from the DOM. 
d3.selectAll('.point').remove(); // removes all elements with the class 'point' 

为了说明这一点，下面的代码绘制一个圆：

var svg = d3.select('body').append('svg'); 
 

 
var circle = svg.append('circle') 
 
    .attr('cx',40) 
 
    .attr('cy',40) 
 
    .attr('r',10);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

你可以多种方式去除圆圈。您可以使用circle.remove();，因为变量circle是一个包含该圆的选择。

或者你可以选择是在SVG圈：svg.selectAll('circle').remove();

或者您也可以选择所有circle S IN的DOM与d3.selectAll('circle').remove();

方法1：

var svg = d3.select('body').append('svg'); 
 

 
var circle = svg.append('circle') 
 
    .attr('cx',40) 
 
    .attr('cy',40) 
 
    .attr('r',10); 
 
    
 
circle.remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

方法2：

var svg = d3.select('body').append('svg'); 
 

 
var circle = svg.append('circle') 
 
    .attr('cx',40) 
 
    .attr('cy',40) 
 
    .attr('r',10); 
 
    
 
svg.selectAll('circle').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

方法3：

var svg = d3.select('body').append('svg'); 
 

 
var circle = svg.append('circle') 
 
    .attr('cx',40) 
 
    .attr('cy',40) 
 
    .attr('r',10); 
 
    
 
d3.selectAll('circle').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

你的情况，你可以尝试上述方法的变化：

var axis = s.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

axis.remove(); 

或者你可以给它一个类或ID，并用它来删除它：

s.append("g") 
      .attr("class", "x axis") 
      .attr('id', 'xAxis') 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

d3.selectAll('#xAxis').remove();