Question

我在React中使用D3 v5，并且具有使用v3的可视化效果。我正在为v5使用npm模块，但对于v3，我正在尝试导入D3以用于该可视化。

在我的组件中，我有：

import * as d3 from './lib/d3/v3/d3';

，然后在d3文件夹的d3.js中，缩小的v3 d3脚本：

const d3 = !function(){function n(n){return n&&(n.ownerDocument||n....

export default d3;

但是出现以下错误：

无法编译。

./src/components/d3/NetworkTopology/D3_NetworkTopology.js
Attempted import error: 'behavior' is not exported from './lib/d3/v3/d3' (imported as 'd3').

NetworkTopology.js：

  ...
  const zoom = d3.behavior
    .zoom()

在v4中删除了“行为”，因此对我来说好像是在拉D3 V5版本而不是V3。如何设置为同时使用两个版本的D3？

我将导入更改为：

import d3 from './lib/d3/v3/d3';

但是出现了以下编译错误：编译失败。

./ src / components / d3 / NetworkTopology / lib / d3 / v3 / d3.js

  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions

我在使用原始import * as d3 from './lib/d3/v3/d3';并删除const并将其导出到d3.js（仅使用原始的缩小文件）中遇到了相同的错误。

Answer 1

我认为这与d3的版本无关。您的问题是，带有最小化库的脚本只有一个Offset.dy（名称为offset.dy+0.001的导出绑定到值为this.context.pageContext.site.id的常量），而组件却有一个命名空间export default d3意味着default将是包含所有导出的模块对象-在您的情况下，仅包含d3。因此import * as d3可以工作。但是，您应该将导入更改为不使用名称空间对象，而是直接导入单个值：

d3

Answer 2

您应该更新

    import d3 from './lib/d3/v3/d3';

Answer 3

虽然先前的答案通过以下方法使我绕开了问题顶部的原始错误：

从'./lib/d3/v3/d3导入d3

，我最终遇到了ES-Lint错误，我通过添加来解决了该问题

/ *禁用eslint * /

但是，然后我得到一个错误，这是由于Babel在D3缩小的代码上插入“ use strict”而引起的。由于Create React App不允许在不弹出应用程序的情况下修改Babel配置，因此我陷入了困境。我曾考虑过在模板中放入脚本或通过AJAX调用从CDN中获取D3脚本，但是我不确定它是否可以在同一应用程序中与两个D3版本一起使用。

最终有效的方法如下。我将早期版本的D3克隆到了应用程序根目录下的目录中，然后将其package.json中的名称修改为“ d3-v3”，并将目录重命名为“ d3-v3”。对于软件包名称，最好使用有范围的npm软件包命名。

然后我做了一个：

npm install file:./d3-v3

在我的React组件中，我将以下内容用于D3 v3

import * as d3 from 'd3-v3';

以及使用的v5：

import * as d3 from 'd3';

ES6导出脚本

3 个答案: