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