我制作了一个平行坐标图，现在我想让它响应 为了测试响应能力，我想首先让this example by Mike Bostock响应。
我面临的问题是，如果我把＆＃34; svg＆＃34;直接在＆＃34; body＆＃34;标签，它完美地运作。但是当我放置＆＃34; svg＆＃34;在某些div中，当调整窗口大小时，图表会被裁剪。此外，svg的高度被提到为70％，如果我将其设为80％，则图表将被裁剪而不进行任何调整。我知道有另一个选项是使用viewBox和preserveAspectRatio，但我使用这种方法，因为它很容易理解，对我或任何其他人来阅读我的代码。这是方法：
d3.csv("data.csv",function(data){
....
function resize(){
width = parseInt(d3.select("#mychart").style("width")) - margin.left - margin.right,
height = parseInt(d3.select("#mychart").style("height")) - margin.top - margin.bottom;
x.rangePoints([0, width], 1);
svg.select("#mychart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
return d != "name" && (y[d] = d3.scale.linear()
.domain(d3.extent(cars, function(p) { return +p[d]; }))
.range([height, 0]));
}));
svg.selectAll(".line").attr("d", path);
g = svg.selectAll(".dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
g.selectAll(".axis")
.each(function(d) {d3.select(this).call(axis.scale(y[d])); })
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });
}
d3.select(window).on('resize', resize);
resize();
});
Here是完整代码的plunker链接。任何人都可以指出代码有什么问题吗？
答案 0 :(得分：0)
这更多是关于理解 CSS 。
具体来说，您可以为<svg>元素height 100%提供<svg>，然后设置包含元素的大小。
此处，height的{{1}}始终为100%，而<div>的{{1}}的{{1}}百分比为<svg>，相对于height容器，它具有绝对高度（viewport units）。
另外，请查看this answer：
如果你想让div高度占视口高度的百分比，div的每个祖先，包括和，必须有高度：100％，所以有一个明确的百分比高度链到div。< / p>
或者，所有现代浏览器和IE＆gt; = 9都支持相对于视口高度（vh）和视口宽度（vw）的新CSS单位：
要使SVG填充HTML元素，请在您的包装器上放置CSS属性
.container-fluid（或position:relative或position:absolute，如果适用），然后设置[...]position:fixed元素上的CSS属性position:absolute使其位于内部并填充div。 （如有必要，还应用<svg>。）
你可以（像我一样）使用viewport units来设置包含left:0; top:0; width:100%; height:100%的高度。
或者，您可以尝试使用flexbox属性来定位div元素。
此外，您的.row功能可以大大简化。它需要做三件事：
resize()