Jquery D3进入/退出路径的圆圈组

我正在创建一个界面，用户可以通过该界面生成多系列折线图，并控制绘制的数据集

要绘制的数据集由复选框控制。在页面加载时，默认数据集以图形形式显示，并且

$('input:checkbox.data-set-control').on('change')

图形将更新为添加或删除请求的数据集

小提琴：

我对代码进行了重构，排除了d3.json（）请求，但总体功能保持不变

我的问题是让代表一系列数据点的圆正确地进入/退出。在我的服务器上，圆圈会正确更新，但不会退出。（由于某些原因，更新和退出都不起作用…）

我已经阅读并重读了Mike关于D3更新/进入/退出功能的所有教程，此外，我还查看了我能找到的每一个远程使用更新/进入/退出进行折线图的示例。我相信我的问题在于我为圆圈所做的选择，尽管经过数小时的修补，我似乎无法找出合适的范围或结构或其他任何东西

图表数据结构的简要概述：

data = [Object, Object, ...]

data[Object] = {
   name: dataSetName,
   data: [Object, Object, ...]
}

data[Object].data = [
   {
      x: val1,
      y: val2,
   }, ...
]

在这种情况下，对于理解更新/进入/退出的任何指导和指示，我们将不胜感激。多谢各位

-- Neal B.

这里有几个问题：

1.）您没有处理节点组

g

元素的输入/更新/退出模式。特别是退出的

g

s是有问题的

2.）选择圆时，使用的是

selectAll（'.circle'）

：选择类的所有内容circle（不存在）。你的意思是有

selectAll（'circle'）

：选择元素circle的所有内容。此外，我建议您在

nodeGroup

和

dataNode

上使用类。当您继续构建图形时，它将导致较少的问题

在这里，一切都安排好了：

svg{
字体：10px无衬线；
}
svg.text{
字体大小：1.2米；
形状渲染：边缘清晰；
}
.控制{
显示：块；
左边距：20px；
边缘顶部：20px；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.线路{
填充：无；
}
.电网{
冲程：#eee；
}
.酒吧{
填充：#40779C；
}
.bar:悬停{
填充：#AD4444；
}
.条形图.x轴路径{
中风：无；
}
.barChart.text，
.lineChart.text{
填充：#fff；
}
.pieChart.text{
填充：#666；
}
.弧形路径{
冲程：#fff；
}
#获取数据{
左边距：10px；
}
#周{
左边距：10px；
}
.手风琴标题{
保证金：3px0；
}
.覆盖{
填充：无；
中风：无；
}
.数据节点{
填充：#eee；
行程：#666；
}
数据集
数据集1
数据集2
数据集3
数据集4


数据集1={
名称：“数据集1”，
数据：[{
x:0,，
y:19
}, {
x:1，
y:16
}, {
x:2，
y:21
}, {
x:3，
y:24
}, {
x:4，
y:19
}, {
x:5，
y:18
}, {
x:6，
y:22
}]
}
数据集2={
名称：“数据集2”，
数据：[{
x:0,，
y:26
}, {
x:1，
y:23
}, {
x:2，
y:29
}, {
x:3，
y:34
}, {
x:4，
y:27
}, {
x:5，
y:28
}, {
x:6，
y:33
}]
};
数据集3={
名称：“数据集3”，
数据：[{
x:0,，
y:45
}, {
x:1，
y:51
}, {
x:2，
y:42
}, {
x:3，
y:47
}, {
x:4，
y:54
}, {
x:5，
y:57
}, {
x:6，
y:49
}]
};
数据集4={
名称：“数据集4”，
数据：[{
x:0,，
y:80
}, {
x:1，
y:69
}, {
x:2，
y:81
}, {
x:3，
y:84
}, {
x:4，
y:78
}, {
x:5，
y:83
}, {
x:6，
y:85
}]
};
//强制json字符串为整数
函数映射数据（数据）{
data.forEach（函数（d）{
d、 data.forEach（函数（v）{
v、 y=（v.y）？+v.y:null；
});
});
返回数据；
}
//获取json请求的请求数据集
函数getDataSets（）{
//循环检查所请求数据集的复选框
数据集=[]；
var c=0；
$（'input:checkbox.data set control'）。每个（函数（i）{
if（$（this.prop（'checked'））{
var name=$（this.sibbines（'span'）.html（）；
var val=$（this.val（）；
如果（名称==“数据集1”）{
数据集[c]=数据集1；
C++；
}
如果（名称==“数据集2”）{
数据集[c]=数据集2；
C++
}
如果（名称==“数据集3”）{
数据集[c]=数据集3；
C++；
}
如果（名称=='dataSet4'）{
数据集[c]=数据集4；
C++；
}
}
});
返回数据集；
}
//svg页边距
var保证金={
前20名，
右:30,，
底数：30，