javascript - react : export 'time' (imported as 'd3' ) was not found in 'd3

Question

我正在转换 HTML 代码以进行 react 。对于 JS 部分，我使用 Babel 在 JSX 中进行转换。但是，当我启动应用程序时，出现错误“在‘d3’中找不到导出‘时间’(导入为‘d3’)”。尽管我在代码中调用了 d3 我仍然收到此错误。

import * as d3 from "d3";

下面是我的代码:

 heatmaps(){
        "use strict";

var itemSize = 22,
    cellSize = itemSize - 1,
    margin = { top: 120, right: 20, bottom: 20, left: 110 };

var width = 750 - margin.right - margin.left,
    height = 300 - margin.top - margin.bottom;

var formatDate = d3.time.format("%Y-%m-%d");

d3.csv('https://bitbucket.org/rohitkalva/viz/raw/9b5f24fc0522a2edbd94f91f89a3396deab03999/data.csv', function (response) {

    var data = response.map(function (item) {
        var newItem = {};
        newItem.country = item.x;
        newItem.product = item.y;
        newItem.value = item.value;

        return newItem;
    });

    var x_elements = d3.set(data.map(function (item) {
        return item.product;
    })).values(),
        y_elements = d3.set(data.map(function (item) {
        return item.country;
    })).values();

    var xScale = d3.scale.ordinal().domain(x_elements).rangeBands([0, x_elements.length * itemSize]);

    var xAxis = d3.svg.axis().scale(xScale).tickFormat(function (d) {
        return d;
    }).orient("top");

    var yScale = d3.scale.ordinal().domain(y_elements).rangeBands([0, y_elements.length * itemSize]);

    var yAxis = d3.svg.axis().scale(yScale).tickFormat(function (d) {
        return d;
    }).orient("left");

    var colorScale = d3.scale.threshold().domain([0.85, 1]).range(["#2980B9", "#E67E22", "#27AE60", "#27AE60"]);

    var svg = d3.select('.heatmap').append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var cells = svg.selectAll('rect').data(data).enter().append('g').append('rect').attr('class', 'cell').attr('width', cellSize).attr('height', cellSize).attr('y', function (d) {
        return yScale(d.country);
    }).attr('x', function (d) {
        return xScale(d.product);
    }).attr('fill', function (d) {
        return colorScale(d.value);
    });

    svg.append("g").attr("class", "y axis").call(yAxis).selectAll('text').attr('font-weight', 'normal');

    svg.append("g").attr("class", "x axis").call(xAxis).selectAll('text').attr('font-weight', 'normal').style("text-anchor", "start").attr("dx", ".8em").attr("dy", ".5em").attr("transform", function (d) {
        return "rotate(-65)";
    });
});
    }

我收到的错误消息是:

export 'time' (imported as 'd3') was not found in 'd3

我所指的代码的 HTML 链接是:https://bl.ocks.org/Bl3f/cdb5ad854b376765fa99

有人知道问题出在哪里吗？

Answer 1

我有同样的问题... 它解决了而不是默认导出，..require模块，因为它..

const d3 = require('d3');

希望这可以解决您的问题