-1

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

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

这是一个链接

4

2 回答 2

1

D3 选择器可以接受节点引用和字符串选择器——利用它对您有利。将 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 开发者网络上的活动文档。resize

于 2013-08-14T09:27:28.387 回答
0

在使用 D3 时，如果你想缩放 x 或 y 轴，如果可以调整到你的数据范围，这是可行和容易的。您可以重置轴的比例。

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

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

于 2013-08-14T14:54:03.273 回答