react.js项目中的d3.js问题

我的react.js web应用程序遇到了一个问题。我正在使用 从“d3”导入*作为d3 导入所有内容并将其保存到d3命名空间,但得到一个名为- 无法读取未定义的属性“stack” . 关于这个问题有什么帮助吗?

单击此处查看=> Demo

我尝试安装d3形状并使用 从“d3形状”导入*作为堆栈 和 从“d3形状”导入堆栈 -两件事都有,又遇到了同样的问题。

以下是我的代码:

import React, { Component } from "react";
import * as d3 from "d3";
// import d3 from "d3-shape";
// import d3 from "d3";
// import * as stack from 'd3-shape';
import "d3-tip";
import { render } from 'react-dom';
import barData from "./JSON/barData.jsx";

class App extends Component {
    componentDidMount() {
        console.log("componentDidMount", this.props.id);
        console.log(barData);
        var margin = { top: 20, right: 160, bottom: 35, left: 0 };

        var width = 500 - margin.left - margin.right,
            height = 162 - margin.top - margin.bottom;

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

        /* Data in strings like it would be if imported from a csv */

        var data = barData;

        //var parse = d3.time.format("%Y").parse;

        // Transpose the data into layers
        var dataset = d3.layout.stack()(
            ["view"].map(function(fruit) {
                return data.map(function(d) {
                    return { x: d.year, y: +d[fruit] };
                });
            })
        );

        // Set x, y and colors
        var x = d3.scale
            .ordinal()
            .domain(
                dataset[0].map(function(d) {
                    return d.x;
                })
            )
            .rangeRoundBands([10, width - 10], 0.02);

        var y = d3.scale
            .linear()
            .domain([
                0,
                d3.max(dataset, function(d) {
                    return d3.max(d, function(d) {
                        return d.y0 + d.y;
                    });
                })
            ])
            .range([height, 0]);

        var colors = ["#39d9F3"];

        // Define and draw axes
        var yAxis = d3.svg
            .axis()
            .scale(y)
            .orient("left")
            .ticks(5)
            .tickSize(-width, 0, 0)
            .tickFormat(function(d) {
                return d;
            });

        var xAxis = d3.svg
            .axis()
            .scale(x)
            .orient("bottom")
            .tickFormat(data.year);

        svg
            .append("g")
            .attr("class", "y axis")
            .call(yAxis);

        svg
            .append("g")
            .attr("class", "x axis legend_texts_two")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        // Create groups for each series, rects for each segment
        var groups = svg
            .selectAll("g.cost")
            .data(dataset)
            .enter()
            .append("g")
            .attr("class", "cost")
            .style("fill", function(d, i) {
                return colors[i];
            });

        var rect = groups
            .selectAll("rect")
            .data(function(d) {
                return d;
            })
            .enter()
            .append("rect")
            .attr("x", function(d) {
                return x(d.x);
            })
            .attr("y", function(d) {
                return y(d.y0 + d.y);
            })
            .attr("height", function(d) {
                return y(d.y0) - y(d.y0 + d.y);
            })
            .attr("width", "20px")
            .on("mouseover", function() {
                tooltip.style("display", null);
            })
            .on("mouseout", function() {
                tooltip.style("display", "none");
            })
            .on("mousemove", function(d) {
                var xPosition = d3.mouse(this)[0] - 15;
                var yPosition = d3.mouse(this)[1] - 25;
                tooltip.attr(
                    "transform",
                    "translate(" + xPosition + "," + yPosition + ")"
                );
                tooltip.select("text").text(d.y);
            })
            .style("fill", function(d, i) {
                return colors[i];
            });

        // Draw legend
        /*var legend = svg
            .selectAll(".legend")
            .data(colors)
            .enter()
            .append("g")
            .attr("class", "legend")
            .attr("transform", function(d, i) {
                return "translate(30," + i * 19 + ")";
            });

        legend
            .append("rect")
            .attr("x", width - 18)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", function(d, i) {
                return colors.slice().reverse()[i];
            });

        legend
            .append("text")
            .attr("x", width + 5)
            .attr("y", 9)
            .attr("dy", ".35em")
            .style("text-anchor", "start")
            .text(function(d, i) {
                switch (i) {
                    case 0:
                        return "View";
                    case 0:
                        return "View";
                    case 2:
                        return "Click";
                }
            });*/

        // Prep the tooltip bits, initial display is hidden
        var tooltip = svg
            .append("g")
            .attr("class", "tooltip")
            .style("display", "none");

        tooltip
            .append("rect")
            .attr("width", 30)
            .attr("height", 20)
            .attr("fill", "white")
            .style("opacity", 0.5);

        tooltip
            .append("text")
            .attr("x", 15)
            .attr("dy", "1.0em")
            .style("text-anchor", "middle")
            .attr("font-size", "12px")
            .attr("font-weight", "bold");
    }

    render() {
        return (
            <div id="dashboard_bar_graph_101" style={{ textAlign: "center" }} />
        );
    }
}

render(<App />, document.getElementById('root'));