Javascript 从新数据更改条形图的高度

我有一个为以下对象数组制作的条形图

var data = [{"state":"California", "values":50},{"state":"Massachusetts":"values:20},{"state":"Texas", "values":15},{"state":"New York","values":5},{"state":"Washington", "values":1}]

svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return barX(d.state); })
    .attr("y", function(d) { return barY(+d.values); })
    .attr("width", barX.bandwidth())
    .attr("height", function(d) { return barH - barY(+d.values); })

y轴是值，x轴是状态。条形图按上述顺序从最大值到最小值的顺序排列。（加州、马萨诸塞州、德克萨斯州、纽约州、华盛顿州）现在我有了一个新的数据集，看起来像：

var data2 = [{"state":"Massachusetts","values":70},{"state":"California", "values":40},{"state":"New York","values":20},{"state":"Washington","values":15},{"state":"Texas", "values":10}]

---

我希望酒吧的顺序仍然是CA、MA、TX、NY、WA，其更新值为40、70、10、20、15。我现在的尝试是改变第一个酒吧（加利福尼亚州），这应该是一个40到70的值。我希望保持排序与第一个数据集相同。我该怎么做呢？

在我看来，你的问题实际上是“如何在保持第一次渲染顺序的同时更新条”

事实上，这比看起来要简单。您只需在第一次渲染时定义x比例中条形图的顺序（此处，

data1

是您的第一个数据数组）：

不要再改变顺序了。此外，在绑定数据时设置一个键函数：

.data(data, d => d.state)

这是一个演示，按钮在两个数据阵列之间切换：

var svg=d3.选择（“svg”）；
var-toggle=false；
变量数据1=[{
“州”：“加利福尼亚州”，
“价值”：50
}, {
“州”：“马萨诸塞州”，
“价值”：20
}, {
“州”：“德克萨斯州”，
“价值观”：15
}, {
“州”：“纽约”，
“价值观”：5
}, {
“州”：“华盛顿”，
“价值观”：1
}];
变量数据2=[{
“州”：“马萨诸塞州”，
“价值”：70
}, {
“州”：“加利福尼亚州”，
“价值”：40
}, {
“州”：“纽约”，
“价值”：20
}, {
“州”：“华盛顿”，
“价值观”：15
}, {
“州”：“德克萨斯州”，
“价值”：10
}];
var xScale=d3.scaleBand（）
.范围（[30370]）
.domain（data1.map（d=>d.state））
.填充（0.2）；
var yScale=d3.scaleLinear（）
.范围（[120,10]）
.domain（[0，d3.max（data1，d=>d.values）]）；
var xAxis=d3.axisBottom（xScale）；
var yAxis=d3.axisLeft（yScale）.ticks（5）；
var gX=svg.append（“g”）
.attr（“类”、“xAxis”）
.attr（“转换”、“翻译（0120）”）
.呼叫（xAxis）；
var gY=svg.append（“g”）
.attr（“类”、“亚克斯”）
.attr（“转换”、“翻译（30,0）”）
.呼叫（yAxis）；
var span=d3。选择（“span”）；
span.文本（“数据：数据1”）
绘图（数据1）
函数图（数据）{
域（[0，d3.max（数据，d=>d.values）]）；
var rects=svg.selectAll（“.rects”）
.数据（数据，d=>d.state）；
rects.enter（）
.append（“rect”）
.merge（rects）
.attr（“x”，d=>xScale（d.state））
.attr（“宽度”，xScale.bandwidth（））
.attr（“y”，d=>yScale（d.values））
.attr（“高度”，d=>120-yScale（d值））
.attr（“填充”、“teal”）
.attr（“类”、“矩形”）；
gY.呼叫（yAxis）
}
d3.选择（“按钮”）。在（“单击”上，函数（）{
如果（切换）{
抽签（数据1）；
span.文本（“数据：数据1”）
}否则{
抽签（数据2）；
span.文本（“数据：数据2”）
};
切换=！切换；
})

切换

.data(data, d => d.state)