javascript - responsive d3 area graph拉伸(stretch)圆交互点

Question

我一直在试验一个简单的 d3 谷歌分析风格的面积图演示。我想让它拉伸(stretch)到容器的整个宽度，我已经做到了。然而，小圆圈当然也会变形。我希望它们的位置具有响应性，但不是它们的尺寸(因此它们保持圆形)。

fiddle 链接:http://jsfiddle.net/46PfK/2/

我正在尝试使用 SVGPanUnscale.js脚本。我尝试用 unscaleEach('.dot'); 和 [].forEach.call($('.dot'),unscale); 调用它，但都没有出现做任何事情。

此示例以与我的类似的方式进行响应，并使用脚本“取消缩放”轴标签:http://meloncholy.com/static/demos/responsive-svg-graph-1/

这个例子也使用了圆形元素: http://phrogz.net/svg/scale-independent-elements.svg

我查看了涉及 css 属性的解决方案:

circle {
    vector-effect: non-scaling-stroke;
}

它在椭圆上创建了一个圆形笔划 - 很奇怪。

CSS 解决方案比 JS 解决方案更可取，前提是它可以跨浏览器工作。

有什么建议吗？

Answer 1

感谢@leMoisela 为我指明了正确的方向。我很好地解决了我的问题，使用 JS 在调整大小时重新绘制图形:

http://jsfiddle.net/46PfK/4/

window.onresize = function(e){
    draw_graph();
};