Vue集成D3图表遇this.ownerDocument未定义错误求助

这个错误的核心问题有两个：

• 直接把Vue的ref对象传给了d3.select()，但D3需要的是原生DOM元素，ref对象本身是响应式包装器，必须通过.value访问内部的DOM节点。
• d3.select()返回的是D3选择集对象，不是原生DOM元素，无法直接调用offsetWidth和offsetHeight属性，得用.node()方法取出实际DOM元素再获取尺寸。

修正后的代码如下：

<template>
  <div ref="chart"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as d3 from 'd3';

const chart = ref(null);

onMounted(() => {
  // 获取ref对应的原生DOM元素，传给d3.select()
  const chartContainer = d3.select(chart.value);
  // 通过.node()取出原生DOM元素，获取容器尺寸
  const domNode = chartContainer.node();
  const margin = { top: 20, right: 20, bottom: 30, left: 50 };
  const width = domNode.offsetWidth - margin.left - margin.right;
  const height = domNode.offsetHeight - margin.top - margin.bottom;

  const svg = chartContainer
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",`translate(${margin.left},${margin.top})`);
});
</script>

额外提醒：如果容器初始没有设置宽高，offsetWidth/offsetHeight可能会返回0，建议给容器通过CSS设置固定宽高或者最小尺寸，确保D3能获取到正确的容器数值。

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