javascript - TypeError : d3. scaleLinear 不是函数

Question

我正在使用 d3(7.0.0 版)在浏览器中使用 HTML 和 React.js 绘制一些图形。我正在按照说明进行操作，但我不断收到错误 TypeError: d3.scaleLinear is not a function。当我将 scaleLinear 替换为 scale.linear 时，它确实有效，但随后返回错误 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")

但是，我无法用轴创建图形，因为它返回错误

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 不是函数。

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 />