Agfdhyk

I'm facing an issue in my react.js web app. I am using import * as d3 from 'd3' to import everything and save it to d3 namespace but getting an error called - Cannot read property 'stack' of undefined. Any help regarding the issue ?

Click here to see the => Demo

I tried installing d3-shape and using import * as stack from 'd3-shape' and import stack from 'd3-shape' - both the things and getting the same problem again.

Here's my code:

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'));

It looks like the API you are using is from d3 version 3 (current version is 5). So, I recommend uninstall d3 dependency and install d3@3. You also do not need to install modules like 'd3-shape', because they were introduced in version 5.

Here is the working example of your code: https://stackblitz.com/edit/react-zx6yfc?file=index.js