Question

我尝试使用百分比而不是像素来调整此折线图的大小。

任何人都可以帮我找到解决方案吗？

Answer 1

D3选择器can accept a node reference以及字符串选择器 - 利用它来为您带来好处。将SVG放在一个容器中，该容器的尺寸可以是任何单位类型（相对或绝对），并按容器设置SVG大小。

var el = document.getElementById('canvas');
var svg = d3.select(el).append('svg');
setSize(svg, el);

function setSize(child, parent) {
    child && parent && 
    child.attr('width', parent.clientWidth)
         .attr('height', parent.clientHeight);
}

将resize事件附加到窗口，并在回调时更新SVG大小：

var that = this;
window.addEventListener('resize', function (e) {
    that.setSize(el);
});

当然，这是过于简单的，并且尚未经过测试，但它应该让你开始。

请参阅Mozilla开发人员网络上的docs on the resize event。

Answer 2

使用D3时，如果要缩放x轴或y轴，可以调整到您的数据范围，这是可行且简单的。您只需重置轴的比例即可。

以此为例进行开发： http://mpf.vis.ywng.cloudbees.net/

（点击图例添加曲线，当新曲线进入时......调整y轴刻度......对于你的问题，我认为可以通过稍微修改代码来解决）

d3.js重新调整大小的折线图

2 个答案: