TypeError: d3.scaleLinear is not a function

Question

我正在使用 d3（版本 7.0.0）在浏览器中使用 HTML 和 React.js 绘制一些图表。我正在按照说明进行操作，但我一直收到错误 TypeError: d3.scaleLinear is not a function。当我用 scale.linear 替换 scaleLinear 时它确实有效，但随后 returns 错误 TypeError: d3.axisBottom is not a function.

这是错误指向的代码块：

var x = d3.scaleLinear().domain([0,t]).nice().range([margin.left,width-margin.right])
var xAxis = d3.axisBottom(x)
var y = d3.scaleLinear().domain([-1,1]).nice().range([height-margin.top,margin.bottom])
var yAxis = d3.axisLeft(y)
svg.append("g")
    .attr("transform",`translate(0,${height/2})`)
    .call(xAxis)
    .call(g=>g.select(".domain").remove())
    .call(g=>g.selectAll(".tick line").clone()
    .attr("y2",-height)
    .attr("stroke-opacity",0.1))
svg.append("g")
    .attr("transform",`translate(${margin.left},0)`)
    .call(yAxis)
    .call(g=>g.select(".domain").remove())
    .call(g=>g.select(".tick line").clone()
    .attr("x2",width)
    .attr("stroke-opacity","0.1"))

这两个错误都是荒谬的，因为 d3 7.0.0 明确地与指示的函数一起工作，但它一直告诉我 scaleLinear 和 axisBottom 都不是函数。谁能告诉我这有什么问题吗？

编辑： 我已经通过直接从他们的模块导入组件来修复它（最后一行是我导入 d3 的方式）：

import { scaleLinear } from 'd3-scale'
import { axisBottom,axisLeft } from 'd3-axis'
import { line } from 'd3-shape'
var d3 = require("d3")

但是，我无法用轴创建图表，因为它 returns 错误

TypeError: path.merge is not a function
    at Array.axis (axis.js:59)
    at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.call (d3.js:975)
    at InstantAnTr.js:219

其中后一行指向附加xAxis的函数，如上面的代码所示。如果我不调用它们，图表就会出现。

编辑 2: 我试图用 import * as d3 from "d3" 替换上面显示的导入元素，但它导致了错误 TypeError: d3__WEBPACK_IMPORTED_MODULE_7__.scaleLinear is not a function.

Answer 1

刚刚使用 D3 V7 测试了 scaleLinear 和 axisBottom。一切都按预期工作，所以问题应该出在其他地方：导入不正确、版本冲突或加载库时出错。

const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 250]);
  
const xAxis = d3.axisBottom(xScale);

d3.select('svg')
  .append('g')
  .attr('transform', 'translate(20,20)')
  .call(xAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

<svg />

TypeError: d3.scaleLinear is not a function

TypeError: d3.scaleLinear is not a function

html

javascript

d3.js