Question

我正在转换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

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

Answer 1

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

const d3 = require('d3');

希望这可以解决您的问题

Answer 2

更改

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

到

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

React：在'd3中找不到导出'时间'（导入为'd3'）

2 个答案: