Я столкнулся с проблемой в моем веб-приложенииact.js.Я использую import * как d3 из 'd3' , чтобы импортировать все и сохранить его в пространстве имен d3, но получаю сообщение об ошибке - Невозможно прочитать свойство 'stack' из неопределенного .Любая помощь по этой проблеме?
Нажмите здесь, чтобы увидеть => Демо
Я попытался установить d3-shape и использовать import* как стек из 'd3-shape' и импорт стека из 'd3-shape' - и то, и другое и та же проблема снова.
Вот мой код:
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'));