Question

我正在尝试使树形图响应，但是，图表只是偏向左侧和底部。好像有影响x0和y0的东西。图表没有响应调整大小，但我认为这可能与宽度和高度有关...可能也会影响图表的位置。或者，这只是一个CSS问题？很困惑这个。我想我错过了一些明显的东西......

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)

Answer 1

在第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

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

1 个答案: