在D3.js中，我对exit（）的行为感到困惑_D3.js

在D3.js中，我对exit（）的行为感到困惑

d3.js

在D3.js中，我对exit（）的行为感到困惑,d3.js,D3.js,今天我在学习D3.js 我首先研究了以下内容：大部分内容似乎很容易理解和理解但是我在让exit（）工作时遇到了一个问题我确实理解可以使用exit（）强制DOM中的元素与JS数组中的值同步的想法 <html> <body> Ref: <a href='https://bost.ocks.org/mike/circles/' target='x'> https://bost.ocks.org/mike/circles/ </a> <

今天我在学习D3.js

我首先研究了以下内容：

大部分内容似乎很容易理解和理解

但是我在让exit（）工作时遇到了一个问题

我确实理解可以使用exit（）强制DOM中的元素与JS数组中的值同步的想法

<html>
<body>

Ref:
<a href='https://bost.ocks.org/mike/circles/' target='x'>
  https://bost.ocks.org/mike/circles/
</a>

<script src="https://d3js.org/d3.v3.min.js"  charset="utf-8"></script>

<script>
  // I should create 3 circles
  var svg1 = d3.select('body')
      .append('svg')
      .attr('id','svg1')
      .attr('width',800).selectAll("circle")
      .data([0, 1, 2])
    .enter()
      .append("circle")
      .attr("cy", 60)
      .attr("cx", function(d, i) { return i * 100 + 30 })
      .attr("r",  function(d)    { return 5+5*d })
  // So far so good. I see 3 circles

  // Now I should remove some.
  var mycircles_a = svg1.selectAll("circle")
    .data([99, 88])
  // I should ask D3 to make the data-array sync with the circle-elements:
  mycircles_a.exit().remove()
  // Above call fails for some reason; I still see 3 circles!
  // I should see 2 circles because mycircles_a is bound to an array with only 2 values.

  'bye'
</script>

</body>

</html>

所以我写了一些代码来演示这个想法，但我的代码失败了

我想知道如何重写JS，以便exit（）强制DOM中的元素与JS数组中的值同步

<html>
<body>

Ref:
<a href='https://bost.ocks.org/mike/circles/' target='x'>
  https://bost.ocks.org/mike/circles/
</a>

<script src="https://d3js.org/d3.v3.min.js"  charset="utf-8"></script>

<script>
  // I should create 3 circles
  var svg1 = d3.select('body')
      .append('svg')
      .attr('id','svg1')
      .attr('width',800).selectAll("circle")
      .data([0, 1, 2])
    .enter()
      .append("circle")
      .attr("cy", 60)
      .attr("cx", function(d, i) { return i * 100 + 30 })
      .attr("r",  function(d)    { return 5+5*d })
  // So far so good. I see 3 circles

  // Now I should remove some.
  var mycircles_a = svg1.selectAll("circle")
    .data([99, 88])
  // I should ask D3 to make the data-array sync with the circle-elements:
  mycircles_a.exit().remove()
  // Above call fails for some reason; I still see 3 circles!
  // I should see 2 circles because mycircles_a is bound to an array with only 2 values.

  'bye'
</script>

</body>

</html>


裁判：
//我应该创建3个圆
var svg1=d3。选择（'body'）
.append（'svg'）
.attr（'id'，'svg1'））
.attr（'width'，800）。选择All（“圆圈”）
.数据（[0,1,2]）
.输入（）
.附加（“圆圈”）
.attr（“cy”，60）
.attr（“cx”，函数（d，i）{返回i*100+30}）
.attr（“r”，函数（d）{return 5+5*d}）
//到目前为止还不错。我看到三个圆圈
//现在我应该去掉一些。
var mycircles\u a=svg1。选择全部（“圆”）
.数据（[99,88]）
//我应该要求D3使数据数组与圆圈元素同步：
mycircles_a.exit（）.remove（）
//由于某种原因，上述调用失败；我仍然看到3个圆圈！
//我应该看到2个圆，因为mycircles_a绑定到一个只有2个值的数组。
“再见”

您没有正确保存对

svg1的引用

您没有正确保存对svg1
的引用

在您的示例中，svg1
本身就是一个“enter”选择
如果您断开链，使svg1
只是创建SVG的一个选择，那么您的代码就可以正常工作：

var svg1=d3.选择（'body'）
.append（'svg'）
.attr（'id'，'svg1'））
.attr（'width'，800）；
svg1.选择全部（“圆圈”）
.数据（[0,1,2]）
.输入（）
.附加（“圆圈”）
.attr（“cy”，60）
.attr（“cx”，函数（d，i）{返回i*100+30}）
.attr（“r”，函数（d）{return 5+5*d}）
var mycircles\u a=svg1。选择全部（“圆”）
.数据（[99,88]）
mycircles\u a.exit（）.remove（）
在您的示例中，svg1
本身就是一个“回车”选择
如果您断开链，使svg1
只是创建SVG的一个选择，那么您的代码就可以正常工作：

var svg1=d3.选择（'body'）
.append（'svg'）
.attr（'id'，'svg1'））
.attr（'width'，800）；
svg1.选择全部（“圆圈”）
.数据（[0,1,2]）
.输入（）
.附加（“圆圈”）
.attr（“cy”，60）
.attr（“cx”，函数（d，i）{返回i*100+30}）
.attr（“r”，函数（d）{return 5+5*d}）
var mycircles\u a=svg1。选择全部（“圆”）
.数据（[99,88]）
mycircles\u a.exit（）.remove（）