D3.js D3js中的响应式平行坐标图

我已经做了一个平行坐标图，现在我想让它响应。 为了测试响应性，我认为首先要使其具有响应性

我面临的问题是，如果我将svg直接放在body标记中，它就可以完美地工作。但是，当我将svg放在一些div中时，当调整窗口大小时，图表会被裁剪。另外，svg的高度被称为70%，如果我将其设置为80%，那么图表将被裁剪而没有任何大小调整。我知道还有另一种选择，那就是使用viewBox和PreserveSpectratio，但我使用这种方法，因为它对我或任何其他阅读我的代码的人来说都很容易理解。方法如下：

 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();
});

---

是完整代码的plunker链接。有人能指出代码有什么问题吗？

这是关于理解CSS的更多内容

具体来说，您可以为元素指定100%的高度，然后设置包含元素的大小

看

此处，始终具有100%的高度，并且包含的具有百分比高度，该百分比高度依次相对于.container流体容器，该容器在中具有绝对高度

此外，请查看：

如果要使div高度占视口高度的百分比，则div的每个祖先（包括和）都必须具有高度：100%，因此有一个到div的显式百分比高度链

或者，所有现代浏览器和IE>=9都支持相对于视口高度vh和视口宽度vw的新CSS单位：

以及：

要使SVG填充HTML元素，请将CSS属性position:relative或position:absolute或position:fixed（如果合适）放在包装器上，然后[…]在元素上设置CSS属性position:absolute，使其位于内部并填充div。如有必要，还应用left:0；排名：0；宽度：100%；身高：100%

您可以像我一样设置包含div的高度

或者，您可以尝试使用该属性定位.row元素

此外，您的调整大小功能可以大大简化。它需要做三件事：

更新刻度的范围 更新使用这些比例的所有属性 调用axis函数 函数调整大小{ width=parseIntd3.selectmychart.stylewidth-margin.left-margin.right， height=parseIntd3.selectmychart.styleheight-margin.top-margin.bottom； x、 范围点[0，宽度]，1； d3.valuesy.forEachfunctionscale{ 刻度范围[高度，0] } svg.selectAll.line.attrd，路径； g=svg.selectAll.dimension .attr转换，函数{ 返回translate+xd+； }; g、 选择all.axis.callaxis.scaley[d] }

---

在链接的plunker中调整大小时，图表不会被裁剪。我使用的是Firefox 44。很抱歉之前没有提及，但是图表在调整大小时被裁剪了。另外，svg的高度提到为70%，如果我将其增加到80%，图表将被裁剪而不调整大小。感谢您的回复。我看了你的例子。你能给我解释一下给予高度是如何有用的吗？当我缩小窗口时，图表确实会被切碎，高度为70vh。如果我把它改为50vh，如果我进一步减小窗口大小，它就会被切碎。那么，我们是否必须通过试错来设置视口高度？另外，如果我想要svg的最小高度和宽度，该怎么办？