我为以下对象数组制作了一个条形图
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
是您的第一个数据数组):
var xScale = d3.scaleBand()
.range([foo, bar])
.domain(data1.map(d => d.state))
并且不要再更改该顺序。除此之外,在绑定(bind)数据时设置一个关键函数:
.data(data, d => d.state)
这是一个演示,按钮在两个数据数组之间切换:
var svg = d3.select("svg");
var toggle = false;
var data1 = [{
"state": "California",
"values": 50
}, {
"state": "Massachusetts",
"values": 20
}, {
"state": "Texas",
"values": 15
}, {
"state": "New York",
"values": 5
}, {
"state": "Washington",
"values": 1
}];
var data2 = [{
"state": "Massachusetts",
"values": 70
}, {
"state": "California",
"values": 40
}, {
"state": "New York",
"values": 20
}, {
"state": "Washington",
"values": 15
}, {
"state": "Texas",
"values": 10
}];
var xScale = d3.scaleBand()
.range([30, 370])
.domain(data1.map(d => d.state))
.padding(0.2);
var yScale = d3.scaleLinear()
.range([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("class", "xAxis")
.attr("transform", "translate(0,120)")
.call(xAxis);
var gY = svg.append("g")
.attr("class", "yAxis")
.attr("transform", "translate(30,0)")
.call(yAxis);
var span = d3.select("span");
span.text("Data: data1")
draw(data1)
function draw(data) {
yScale.domain([0, d3.max(data, d => d.values)]);
var rects = svg.selectAll(".rects")
.data(data, d => d.state);
rects.enter()
.append("rect")
.merge(rects)
.attr("x", d => xScale(d.state))
.attr("width", xScale.bandwidth())
.attr("y", d => yScale(d.values))
.attr("height", d => 120 - yScale(d.values))
.attr("fill", "teal")
.attr("class", "rects");
gY.call(yAxis)
}
d3.select("button").on("click", function() {
if (toggle) {
draw(data1);
span.text("Data: data1")
} else {
draw(data2);
span.text("Data: data2")
};
toggle = !toggle;
})
<script src="https://d3js.org/d3.v4.js"></script>
<button>Toggle</button>
<span></span>
<br>
<svg width="400">
</svg>
关于javascript - 根据新数据更改条形图的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43421338/