2

我一直在尝试一个简单的d3谷歌分析风格的面积图演示。我想让它伸展到容器的整个宽度，我已经设法做到了。然而，小圆圈当然也变形了。我希望他们的位置能够响应，但不是他们的尺寸（所以他们保持圆形）。

小提琴链接：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 解决方案更可取，前提是它可以跨浏览器工作。

有什么建议么？

4

2 回答 2

0

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

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

window.onresize = function(e){
    draw_graph();
};
于 2013-11-14T13:11:12.980 回答
0

有一个使用 D3 调整大小的好例子https://blog.safaribooksonline.com/2014/02/17/building-responsible-visualizations-d3-js/

在你更新你的比例之后，只剩下调整你的圈子大小的事情是这样的：

/* Force D3 to recalculate and update the points */
svg.selectAll('circle')
    .attr('cx', function (d) { return xScale(d.x); })
    .attr('cy', function (d) { return yScale(d.y); })
    .attr('r', 4);
于 2015-02-25T03:57:00.583 回答