我一直在试验一个简单的 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 解决方案更可取,前提是它可以跨浏览器工作。
有什么建议吗?
最佳答案
感谢@leMoisela 为我指明了正确的方向。我很好地解决了我的问题,使用 JS 在调整大小时重新绘制图形:
window.onresize = function(e){
draw_graph();
};
关于javascript - responsive d3 area graph拉伸(stretch)圆交互点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19955354/