Question

我一直在试验一个简单的 d3 谷歌分析风格的区域图演示。我想让它伸展到容器的整个宽度，这是我设法做到的。然而，小圆圈当然也会变形。我希望他们的立场能够有所回应，但不是他们的维度（所以他们保持循环）。

我正在尝试使用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在resize上重绘图形：

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

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

Answer 2

使用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);

响应式d3区域图拉伸圆形交互点

2 个答案: