javascript - 在 d3js 中更新 clipPath 和动态 yaxis

标签 javascript d3.js

我做了 this (SOLVED) 图表,我不知道如何更新 clipPath。 我已经注释掉了

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

在 change 函数中,因为它没有更新 yAxis 旁边的 clipPath,我尝试将一个类分配给 clipPath 并更新 change 函数中的 y 和 height 属性,但似乎没有任何效果。

如果有人知道我做错了什么或为什么无法更新 clipPath,将不胜感激。

最佳答案

您设置了新域,但您还需要根据域更新那些东西(剪辑路径和区域的 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 .

关于javascript - 在 d3js 中更新 clipPath 和动态 yaxis,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42342496/

相关文章:

javascript - 使用 Rails 以 Haml 形式执行 JavaScript

javascript - 条件 scss 或覆盖变量

javascript - 用户名实时更改中 keyup() 事件和 change() 事件之间的区别

javascript - 将 Canvas 扩展到完整的浏览器窗口

javascript - 在 HTML5 <canvas> 上更改 fillText() 的颜色

javascript - "TypeError: Cannot read property ' 作用域 Fn ' of undefined"。这是什么?

javascript - 即使在 React 中使用 .exit().remove(),D3 也会继续重新渲染

java - jsp中如何从 Controller 获取json数据?

javascript - observablehq 上使用了什么 HTML 处理?

javascript - 这个语句中的+有什么作用: a = +array[i]