如何在viewBox中对齐和调整图表大小

我正在尝试使树形图响应，但是，图表只是简单地向左和向下漂移。就好像有影响x0和y0的东西。图表没有响应调整大小，但我认为这可能与宽度和高度有关...可能影响图表的位置。或者，这只是一个CSS问题？与这个很混淆。我想我失去了一些东西明显...如何在viewBox中对齐和调整图表大小

Plnkr：https://plnkr.co/edit/U7Zsbjy0zubnMwo1SHg8?p=preview

var svg = d3.select("#graph") 
.append("svg") 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom) 
    .attr('style', 'border:solid 2px blue') 
    .attr('style', 'padding0px') 
.call(responsivefy)

来源

2016-11-10 Kevin Waterson

在管线156你在做

var newNode = node.enter() 
      .append("g") 
      .attr("class", "node"); 
      .attr("transform", "translate("+[fullWidth/2, fullHeight/2]+")")

代码块的最后一行是为什么一切都结束了底部对，你正在翻译每个组从图表中间开始（而不是左上角）。如果你删除它，图表看起来没问题。以下是您编辑过的图表：https://plnkr.co/edit/RUhlH4rwopNKf4iDiUge?p=preview

至于使其响应，您已经在SVG上设置了viewbox属性以使其响应。您不需要额外的功能responsivefy就可以了。你看起来像你使用这个答案的响应类：https://stackoverflow.com/a/25978286/11487但你的标记中的节点的顺序不是那里。

一两件事，重要的是要注意：当您使用preserveAspectRatio与"xMinYMin meet"得到响应曲线，则不能使用width和height说明。

随着该固定起来：

https://plnkr.co/edit/KADSH9GSX1E3lnpmhzjV?p=preview

来源

2016-11-10 04:22:44

“有一点要注意这一点很重要：当您使用preserveAspectRatio与‘xMinYMin大会’得到响应曲线，则不能使用宽度和高度的指令” - 注意 –

如何在viewBox中对齐和调整图表大小

回答

相关问题