在d3js中更新clipPath以及动态yaxis

Question

我已经制作了this （已解决）图表，但我无法弄清楚如何更新clipPath。 我已经注释掉了

y.domain(d3.extent(data, function(d) { return d[city]; }));

在更改函数中，因为它没有与yAxis一起更新clipPath，我试图将一个类分配给clipPath并更新更改函数中的y和height属性，但似乎没有任何工作

如果有人知道我做错了什么或者为什么无法更新clipPath，我将非常感激。

Answer 1

您设置了新域，但您还需要根据域（剪辑路径和区域的y0）更新这些内容：

y.domain(d3.extent(data, function(d) { return d[city]; })); // fix clipPath

svg.select('#clip-below>rect')
  .attr("y", y(1))
  .attr("height", height - y(1));   
svg.select('#clip-above>rect')
  .attr("height", y(1));
 area.y0(y(1));

这是一个更新的bl.ocks。