根据更新的数据调整矩形大小（d3.js）

Question

我昨天发了一个类似的帖子，但是在得到几条评论后决定删除它，因为我非常误解我的问题实际上是什么，因此我已经努力解决它，并希望能更准确地解释它。

我想更新3个矩形的大小，使用新数据但相对于父宽度保持不变，而不是直接根据数据更改调整它们的大小。

下面是一个plnk链接；

http://plnkr.co/edit/eVfgniBQLbJLiMvAtWLI

这个例子展示了我想要更改数据的方式。问题在于轴的宽度会独立于父宽度扩展/收缩。

我认为解决方案可能是这样的；

  // OLD SOLUTION
      x: d.y,
      y: d.x,
      x0: d.y0

  // NEW SOLUTION
      x: (d.y / calcTotal) * width,
      y: d.x,
      x0: (d.y0 / calcTotal) * width

这将计算每个数字相对于新数据集的总量的百分比，然后将每个数字乘以父容器的宽度，以确保每个矩形每次都会改变大小，但保持相对于父容器的大小。但是，我不确定如何修复其余的功能，因为当使用我的新解决方案更新数据时，矩形在视觉上不会更改其大小。感谢任何建议！谢谢。

- alexc

Answer 1

问题在于您仅在创建块中设置矩形中的数据。您应该像下面这样更新矩形和组中的数据：

//update the group with new data
groups = svg.selectAll('g')
  .data(dataset)


if (create) {
  groups
    .enter()
    .append('g').attr('class', 'stacked')
    .style('fill', function(d, i) {
      return colours(i);
    })
  rects = groups.selectAll('.stackedBar')
    .data(function(d, i) {
      return d;
    })

  rects
    .enter()
    .append('rect').attr('class', 'stackedBar')
    .attr('x', function(d) {
      return xScale(d.x0);
    })

  .attr('height', height)
    .attr('width', 0);
} else {
  .//update the rectangle with new data
  rects = groups.selectAll('.stackedBar')
    .data(function(d, i) {
      return d;
    })
}
//now do transition.

这里是可工作的代码链接

- Cyril Cherian

---

啊，太好了。如果我们把我们的答案结合起来，就可以得到他想要的东西了，谢谢！ - chennighan

Answer 2

我可能漏掉了什么，但如果您只是在script.js中将width=400更改为width='100%'，会发生什么？这是我的更新：http://plnkr.co/edit/DKZdjposoN2omC55rM2d?p=preview 然后，当您更改data.JSON中的数据时，它将反映基于父容器百分比的宽度，就像您想要的那样。

- chennighan

---

这个不行 - 当我用你的解决方案点击法国时，第一个矩形= 71％，第二个= 29.8％，第三个= 32％。它把最后一个推出了屏幕。 - alexc

没错，但它所做的只是相对于父元素的宽度。在您的代码中，使用静态设置的width=400;也会产生相同的效果。这只是使其相对于父元素的宽度。即使使用width=400;，当您选择法国时，它仍然会将其排除在第三个部分之外。 - chennighan

是的 - 但目标是使数据相对于父宽度，因此无论实际数据是什么，每个矩形都将按比例表示为父宽度，我不希望矩形被推出屏幕，我希望它们都包含在100％内并得到表示。 - alexc