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

这计算每个数字与新数据集总量相比的百分比，然后将每个数字乘以父容器的宽度，以确保每个矩形每次都会改变大小，但保持相对于父级宽度。

但是，我不确定如何从这里修复其余的功能，因为当使用我的新解决方案更新数据时，矩形不会直观地改变它们的大小？

我感谢任何建议！

由于

Answer 1

问题是您是在创建块中仅在矩形中设置数据。

您应该更新rect和group中的数据，如下所示：

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

工作代码here

Answer 2

我可能错过了一些内容，但如果您在tail = Tail('long') bill = Bill('wide orange') duck1 = Duck(bill, tail) tail = Tail('short') bill = Bill('norvegian blue') duck2 = Duck(bill, tail) duck1.about()中将width=400更改为width='100%'该怎么办？这是我的更新：http://plnkr.co/edit/DKZdjposoN2omC55rM2d?p=preview

然后，当您更改script.js中的数据时，它将根据您想要的父容器百分比反映宽度。

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

2 个答案: