javascript - 根据新数据更改条形图的高度

Question

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

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 之间的值。我想保持排序与第一个数据集相同。我该怎么做？

Answer 1

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

嗯，这实际上比看起来更简单。您只需要在第一次渲染时定义 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>