从新数据

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值是状态。条形图按照上述顺序中的最大值到最小值的顺序排列。 （CA，MA，TX，NY，WA）现在我有了一个新的数据集，如下所示：

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))

不要再改变那个顺序了。除此之外，在绑定数据时设置关键功能：

.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>