Question

NewBie for d3.js.我尝试根据方法

删除xAxis

s.selectAll（＆＃34; G＆＃34）。除去（x-轴）;

但它不起作用。不确定是否是删除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

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

删除d3.js中的元素

1 个答案: