javascript - 删除 d3.js 中的元素

Question

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

或者您可以使用 d3.selectAll('circle').remove();

选择 DOM 中的所有 circle

方法一:

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>

方法二:

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>

方法三:

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