配置：react+d3

最新推荐文章于 2024-08-19 11:27:18 发布

Zih_An

最新推荐文章于 2024-08-19 11:27:18 发布

阅读量322

点赞数

分类专栏： [Fullstack] 配置文章标签： react.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/HANZY72/article/details/121168058

版权

[Fullstack] 配置专栏收录该内容

13 篇文章

订阅专栏

这篇博客展示了如何在React应用中整合D3.js库，利用`useEffect`和`useRef`钩子创建可复用的图表组件。作者首先配置了npm、parcel和react环境，然后通过导入d3库，定义了一个SVG元素的引用。在`useEffect`中，设置了图表的属性，异步加载数据，并绘制了线形图。示例代码详细展示了如何将D3与React组件完美融合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将npm+parcel+react配置完成后

npm i d3
import * as d3 from "d3";

使用React useEffect和useRef

import React, { useEffect, useRef } from 'react';

示例代码：

import React, { useEffect, useRef } from 'react';
import * as d3 from "d3"; 
import "../styles/LineChart.css"; 

export default function LineChart() {
   const d3Chart = useRef();
   useEffect(()=>{
       // attr
       var margin = {top: 10, right: 30, bottom: 20, left: 60};
       var width = 700 - margin.right - margin.left, height = 500 - margin.top - margin.bottom;
       var svg = d3.select(d3Chart.current)
               .attr("width", width+margin.right+margin.left)
               .attr("height", height+margin.top+margin.bottom+40)
               .append("g")
               .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
   		// 异步获取数据并画图
   		d3.csv("https://raw.githubusercontent.com/zih-an/visualization/master/lab1/2.csv")
   	    .then(d => chart_lines(d, svg, margin, width, height));
   },[]);

   return (
       <div>
           <p>This is a D3 and Component test.</p>
           <svg ref={d3Chart}></svg>
       </div>
   );
}

function chart_lines(data, svg, margin, width, height) {
   // 画图
}