这段代码还是无法正常显示
时间: 2024-02-24 07:58:42 浏览: 22
这段代码还存在一个问题,就是在 `<svg>` 元素中设置了固定的宽度和高度,而在代码中生成的标尺图表的高度为 300px,这会导致标尺图表超出了 `<svg>` 元素的高度范围,因此无法正常显示。应该将 `<svg>` 元素的高度设为 0,让其自适应标尺图表的高度。修改后的代码如下:
```
import { defineComponent, ref, onMounted } from 'vue'
import * as d3 from 'd3'
export default defineComponent({
template: '<svg ref="chartRef" style="width: 50px; height: 0; background:red"></svg>',
setup () {
const chartRef = ref(null)
onMounted(() => {
const container = d3.select(chartRef.value)
const width = 50
const height = 300
const scale = d3.scaleLinear()
.domain([0, 100])
.range([height, 0])
const g = container.append('g')
.attr('transform', `translate(${width / 2}, 0)`)
.call(d3.axisLeft(scale))
})
return () => chartRef.value
}
})
```
这样修改后,就能够正常显示标尺图表了。