反应：在“d3”中找不到导出“时间”（导入为“d3”）答案

【问题标题】：React: export 'time' (imported as 'd3') was not found in 'd3反应：在“d3”中找不到导出“时间”（导入为“d3”）
【发布时间】：2017-12-25 18:51:39
【问题描述】：

我正在转换 HTML 代码以做出反应。对于 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

任何人有想法有什么问题？

【问题讨论】：

您的代码使用的是 D3 v3，但您可能正在导入 v4。
你是怎么解决的？

标签： javascript html reactjs d3.js

【解决方案1】：

我有同样的问题... 它解决了 default export ,..require 模块而不是它..

const d3 = require('d3');

希望这可以解决您的问题

【讨论】：

【解决方案2】：

改变

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

到

d3.timeFormat('"%Y-%m-%d')

【讨论】：