使用nodeSize的D3垂直树子节点x值异常过高问题排查

我在Vue项目中使用D3.js v7.8.5构建垂直树组件，由于数据是动态加载且可变的，因此必须采用nodeSize进行布局配置。目前根节点位置显示正常，但子节点的X坐标值异常偏高，该现象可通过Chrome调试观察到。此前使用size配置能正常实现布局，但该方案无法满足当前动态数据的需求，希望有人能解释该问题的产生原因。

以下是我的代码：

<!-- VerticalTree.vue -->
<template>
  <div id="chart"></div>
</template>

<script>
import * as d3 from 'd3';

export default {
  name: 'Chart',
  data() {
    return {
      margin: { top: 20, right: 20, bottom: 20, left: 20 },
      width: window.innerWidth - 40, // subtract margins
      height: window.innerHeight - 40, // subtract margins
      i: 0,
      duration: 750,
      rectW: 20,
      rectH: 16,
      horizontalSeparationBetweenNodes: 70,
      verticalSeparationBetweenNodes: 80,
      url: "<redacted>",
      app_count: true,
      app_data: null,
      root: null,
      svg: null,
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {

      d3.json(this.url).then(data => {
        this.createChart(data);
      });

    },

    createChart(data) {

      const svg = d3
        .select('#chart')
        .append('svg')
        .attr('width', this.width - this.margin.right - this.margin.left)
        .attr('height', this.height - this.margin.top - this.margin.bottom)
        .append('g')
        .attr("transform", "translate(" + this.width / 2 + "," + 20 + ")");

      let treeLayout = d3.tree()
        .nodeSize([this.rectW + this.horizontalSeparationBetweenNodes, this.rectH + this.verticalSeparationBetweenNodes])
        .separation(function (a, b) {
          return a.parent == b.parent ? 1 : 1;
        });

      this.root = d3.hierarchy(data);

      treeLayout(this.root);

      if (this.root.children) {
        this.root.children.forEach(this.collapse);
      }

      // Draw links
      svg
        .selectAll('.link')
        .data(this.root.links())
        .enter()
        .append('path')
        .attr('class', 'link')
        .attr("id", "links")
        .attr('d', d3.linkVertical().x(d => d.x).y(d => d.y));

      // Draw nodes
      const nodes = svg
        .selectAll('.node')
        .data(this.root.descendants())
        .enter()
        .append('g')
        .attr('class', 'node')
        .attr("id", "nodes")
        .attr('transform', d => `translate(${d.x},${d.y})`);

      nodes
        .append('circle')
        .attr('r', 5)
        .style('fill', 'steelblue');

      nodes
        .append('text')
        .attr('dy', '0.31em')
        .attr('x', 0)
        .attr('y', d => (d.children ? -8 : 20))
        .style('text-anchor', 'middle')
        .text(d => d.data.name);

      console.log(this.root);
    },

    collapse(node) {
      if (node.children) {
        node._children = node.children;
        node._children.forEach(this.collapse);
        node.children = null;
      }
    },

  },
};
</script>

内容的提问来源于stack exchange，提问作者Nikit Parakh