[英]React-d3 Line Chart not showing and showing no errors
我正在尝试创建我的第一个 react d3 折线图,但遇到了障碍。 我检查 Chrome 时没有出现任何错误,所以我不确定它为什么没有出现。 我觉得我很接近。
我试图查看其他示例,但由于某种原因,我没有找到很多 csv 示例。
这是我的代码:
import React, { useRef, useEffect, useState } from "react";
import * as d3 from "d3";
import csvData from "../sandbox.csv";
import {
select,
line,
curveCardinal,
axisBottom,
axisRight,
scaleLinear,
} from "d3";
function ActionsLineGraph() {
const [data, setData] = useState(null);
const [loading, setLoading] = React.useState(true);
// const [data, setData] = useState([25, 30, 45, 60, 20, 65, 75]);
const svgRef = useRef();
// will be called initially and on every data change
useEffect(() => {
d3.csv(csvData).then((data) => {
// console.log("Fetching Data");
console.log(data);
setData(data);
setLoading(false);
const svg = select(svgRef.current);
const xScale = scaleLinear()
.domain([0, data.length - 1])
.range([0, 300]);
const yScale = scaleLinear().domain([0, 150]).range([150, 0]);
const xAxis = axisBottom(xScale)
.ticks(data.length)
.tickFormat((index) => index + 1);
svg.select(".x-axis").style("transform", "translateY(150px)").call(xAxis);
const yAxis = axisRight(yScale);
svg.select(".y-axis").style("transform", "translateX(300px)").call(yAxis);
// set the dimensions and margins of the graph
const margin = { top: 20, right: 20, bottom: 50, left: 70 },
width = 300 - margin.left - margin.right,
height = 150 - margin.top - margin.bottom;
// add X axis and Y axis
const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);
const parseTime = d3.timeParse("%Y-%m-%d");
const myLine = d3.line()
.x(d => x(xScale(parseTime(d.date))))
.y(d => y(yScale(Number(d.added))));
/* const myLine = d3.line()
.x((d) => { return x(parseTime(d.date)); })
.y((d) => { return y(Number(d.added)); }); */
svg
.append("path")
.data([data])
.attr("class", "line")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 10)
.attr("d", myLine)
.style('overflow', 'visible')
// .style("transform", "translate(500px, 150px)");
});
}, []);
return (
<React.Fragment>
<svg ref={svgRef}>
<g className="x-axis" />
<g className="y-axis" />
</svg>
</React.Fragment>
);
}
export default ActionsLineGraph;
这是我正在使用的 csv 数据:
date,added,updated,deleted
2021-09-15,10,9,8
2021-09-16,20,11,7
2021-09-17,15,12,9
2021-09-18,20,9,8
2021-09-19,20,9,8
任何和所有的帮助或方向表示赞赏。
您的代码包含一些错误。 请参阅代码段中的解决方案:
const csvData = `date,added,updated,deleted 2021-09-15,10,9,8 2021-09-16,20,11,7 2021-09-17,15,12,9 2021-09-18,20,9,8 2021-09-19,20,9,8 `; const ActionsLineGraph = (props) => { const svgRef = React.useRef(); // will be called initially and on every data change React.useEffect(() => { const data = d3.csvParse(csvData); console.log(data); const parseTime = d3.timeParse("%Y-%m-%d"); const svg = d3.select(svgRef.current); const from = parseTime(data[0].date); const to = parseTime(data[data.length-1].date); console.log('FROM: ', from); console.log('TO: ', to); const xScale = d3.scaleTime().domain([to, from]).range([300, 0]); const yScale = d3.scaleLinear().domain([0, 30]).range([150, 0]); const xAxis = d3.axisBottom(xScale).ticks(data.length).tickFormat((index) => index + 1); svg.select(".x-axis").style("transform", "translateY(150px)").call(xAxis); const yAxis = d3.axisRight(yScale); svg.select(".y-axis").style("transform", "translateX(300px)").call(yAxis); // set the dimensions and margins of the graph const margin = { top: 20, right: 20, bottom: 50, left: 70 }, width = 300 - margin.left - margin.right, height = 150 - margin.top - margin.bottom; // add X axis and Y axis const x = d3.scaleTime().range([0, width]); const y = d3.scaleLinear().range([height, 0]); const path = data.reduce((path, item, index) => { const x = xScale(parseTime(item.date)); const y = yScale(Number(item.added)); const point = `${x},${y}`; return index === 0? `M ${point}`: `${path} L ${point}`; }, null); console.log('PATH: ', path); svg.append("path").attr("class", "line").attr("fill", "none").attr("stroke", "steelblue").attr("stroke-width", 10).attr("d", path) }, [svgRef]); return ( <svg ref={svgRef}> <g className="x-axis" /> <g className="y-axis" /> </svg> ); } ReactDOM.render(<ActionsLineGraph />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script> <div id="app"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.