javascript - d3 图表调整大小无法按预期工作

Question

我正在尝试制作响应式图表。

这是我的代码:

var width = (parseInt(d3.select('#'+chartID).style('width'), 10));

...

d3.select(window).on('resize', function() {
    // Recalculate
    width = parseInt(d3.select('#'+chartID).style('width'), 10);
    d3.select(svg.node().parentNode).style('width', (width) + 'px');
});

它不会为 SVG 设置样式属性。我错过了什么？

Answer 1

抱歉“回答”，我没有评论积分。您阅读后我可以删除此内容:

检查您的“svg”是否是组(g)元素。也许是这样的:

var svg = d3.select('#chart').append('svg')
    .style('width', (width + margin.left + margin.right) + 'px')
    .append('g')
    .attr('transform', 'translate(' + [margin.left, margin.top] + ')');

在这种情况下，您需要parentNode来获取实际的svg，即您的组的父级。

但是如果你的“svg”不是 g，请删除parentNode。