Javascript d3，更新多条路径

以下代码在单个d3.js绘图上有多个路径。我让初始绘图工作，显示数据集

d0

。装载时看起来像这样：

按下按钮时，我想在

d1

中显示数据，因此它应该如下所示：

目前发生的一切……什么都没有。控制台中没有错误，显示没有更改，DOM也没有更改（我可以看到？）

我已经阅读了十几个代码示例和教程，只是不知道这里出了什么问题。任何帮助都将不胜感激（特别是如果能解释一下我在概念上遗漏了什么）。谢谢

var d0=[{
id:“A”，
价值观：[{
x:.25，
y:.9
}, {
x:.75，
y:1
}]
},
{
id:“B”，
价值观：[{
x:.25，
y:.5
}, {
x:.8，
y:.4
}]
},
{
id:“C”，
价值观：[{
x:1，
y:.1
}, {
x:.9，
y:.1
}]
}
]
变量d1=[{
id:“A”，
价值观：[{
x:0,，
y:1
}, {
x:1，
y:1
}]
},
{
id:“B”，
价值观：[{
x:0,，
y:.5
}, {
x:1，
y:.5
}]
},
{
id:“C”，
价值观：[{
x:0,，
y:0
}, {
x:1，
y:0
}]
}
]
var svg=d3.选择（“svg”）
var保证金={
前20名，
右:80,，
底数：30，
左：50
}
var width=svg.attr（“width”）-margin.left-margin.right
var height=svg.attr（“height”）-margin.top-margin.bottom
g=svg.append（“g”）.attr（“转换”、“转换”（+margin.left+），“+margin.top+”）
var scaleX=d3.scaleLinear（）.range（[0，width]）.domain（[0，1]）
var scaleY=d3.scaleLinear（）.range（[height，0]）.domain（[0，1]））
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（scaleX））；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.call（d3.axisLeft（scaleY））
var line=d3.line（）
.x（功能（d）{
返回scaleX（d.x）
})
.y（功能（d）{
返回刻度（d.y）
});
var lineg=g.selectAll（“.lineg”）
.数据（d0）
.输入（）
.附加（“g”）
.attr（“类别”、“线条”）；
lineg.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{
返回线（d值）
})
函数更新（）{
变量i=g.selectAll（“.lineg”）
.数据（d1）
i、 输入（）
.附加（“g”）
.attr（“类”、“行”）
i、 退出（）
.删除（）
g、 全选（“.line”）
.attr（“d”，函数（d）{
返回线（d值）
})
}

.line{
填充：无；
笔画：钢蓝；
笔划宽度：1.5px；
}

更改

在上调用

.data

或

.datum

的每个SVG元素都有对数据对象的内部引用。在更新调用中，您更新了保存行的

g

元素的数据，但从未更新过行本身的数据

我可以通过以下代码实现这一点：

i.select(".line")
  .datum(function(d) {
    return d;
  })
  .attr("d", function(d) {
    return line(d.values)
  })

这里，从新选择的组

i

（您已经给出了正确的数据）开始，我选择该行，然后通过函数直接从

g

传递基准对象。这样，数据对象就会更新，调用

line（d.values）

现在实际上使用

d1

中的条目，而不是

d0

var d0=[{
id:“A”，
价值观：[{
x:.25，
y:.9
}, {
x:.75，
y:1
}]
},
{
id:“B”，
价值观：[{
x:.25，
y:.5
}, {
x:.8，
y:.4
}]
},
{
id:“C”，
价值观：[{
x:1，
y:.1
}, {
x:.9，
y:.1
}]
}
]
变量d1=[{
id:“A”，
价值观：[{
x:0,，
y:1
}, {
x:1，
y:1
}]
},
{
id:“B”，
价值观：[{
x:0,，
y:.5
}, {
x:1，
y:.5
}]
},
{
id:“C”，
价值观：[{
x:0,，
y:0
}, {
x:1，
y:0
}]
}
]
var svg=d3.选择（“svg”）
var保证金={
前20名，
右:80,，
底数：30，
左：50
}
var width=svg.attr（“width”）-margin.left-margin.right
var height=svg.attr（“height”）-margin.top-margin.bottom
g=svg.append（“g”）.attr（“转换”、“转换”（+margin.left+），“+margin.top+”）
var scaleX=d3.scaleLinear（）.range（[0，width]）.domain（[0，1]）
var scaleY=d3.scaleLinear（）.range（[height，0]）.domain（[0，1]））
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（scaleX））；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.call（d3.axisLeft（scaleY））
var line=d3.line（）
.x（功能（d）{
返回scaleX（d.x）
})
.y（功能（d）{
返回刻度（d.y）
});
var lineg=g.selectAll（“.lineg”）
.数据（d0）
.输入（）
.附加（“g”）
.attr（“类别”、“线条”）；
lineg.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{
返回线（d值）
})
函数更新（）{
变量i=g.selectAll（“.lineg”）
.数据（d1）
i、 输入（）
.附加（“g”）
.attr（“类”、“行”）
i、 退出（）
.删除（）
i、 选择（“.行”）
.基准（功能（d）{
返回d；
})
.attr（“d”，函数（d）{
返回线（d值）
})
}

.line{
填充：无；
笔画：钢蓝；
笔划宽度：1.5px；
}

更改

感谢您的帮助，它运行良好。我注意到您使用了select（）而不是selectAll（）。之所以selectAll（）不起作用，是因为datum（）需要一个元素吗？是的，那么您应该将元素包装成长度为1的数组，并使用

.data