无法将d3集成到Vue 3组件中
我已经将d3依赖项安装在项目目录中，如下所示：
npm install d3 --save我将d3模块导入到Component中，如下所示：
import d3 from "d3";对我没有任何错误或警告。不幸的是，从d3模块调用任何方法都失败了。
例如，我试图绘制这线图，在模块的第一个select方法中出现了一个错误。
Uncaught (in promise) TypeError: Cannot read property 'select' of undefined.这怎么可能是？在d3模块的每个方法上悬停在VS Code中，向我展示该方法的文档。所以我想这个模块不可能是未知的。
<script>
import d3 from 'd3';
const data = [99, 71, 78, 25, 36, 92];
export default {
name: 'non-vue-line-chart',
template: '<div></div>',
mounted() {
const svg = d3.select(this.$el) // the error appears on the very first line of the d3-module
.append('svg')
.attr('width', 500)
.attr('height', 270)
.append('g')
.attr('transform', 'translate(0, 10)');
const x = d3.scaleLinear().range([0, 430]);
const y = d3.scaleLinear().range([210, 0]);
d3.axisLeft().scale(x);
d3.axisTop().scale(y);
x.domain(d3.extent(data, (d, i) => i));
y.domain([0, d3.max(data, d => d)]);
const createPath = d3.line()
.x((d, i) => x(i))
.y(d => y(d));
svg.append('path').attr('d', createPath(data));
},
};
</script>一定有一些集成错配，我无法自己解决它。请帮帮忙。
回答 1
Stack Overflow用户
发布于 2021-02-26 16:21:55
如果知道您使用的是哪个版本的d3，将会很有帮助。我假设这是最新的，此时是v6。
d3 v4仍然使用import d3 from 'd3';方式进行导入，但是在v6 (和v5)中，现在使用ES模块的方法是。
import * as d3 from 'd3';这种更改允许开发人员选择他们需要的特性，然后编译器可以树式地抖动依赖项，并且只包含所需的特性。
所以你也可以：
import {select, scaleLinear, axisLeft, axisTop, extent, max, line} as d3 from 'd3';最后得到一个更小的包裹
更新
错误：Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.告诉您，d3.select(this.$el)中的$el不是节点。若要解决此问题，请在this.$nextTick(function () {...})内部使用
mounted类型：函数 **详情：** 在实例被挂载后调用，传递给app.mount的元素将被新创建的vm.$el替换。如果根实例被挂载到文档中的元素中，则在调用挂载时，vm.$el也将在文档中。 请注意，挂载并不保证所有子组件也已安装。如果要等到整个视图呈现完毕，可以在挂载中使用vm.$nextTick： 挂载() {$nextTick(函数(){ //代码，仅在//整个视图呈现}后运行)}
https://stackoverflow.com/questions/66387796
复制相似问题
腾讯云开发者
