从零开始学D3js：在react中搭建d3力导向图，一睹数据可视化的魅力

2024-02-22 00:53:58

前言

数据可视化是将数据以一种图形或图表的方式呈现出来，以便于人们更好地理解和分析数据。D3js是一个能够制作精美、复杂图表的数据可视化库。它允许您完全控制图表的外观和行为，并提供了一系列强大的功能，可以帮助您创建出具有交互性和动画效果的图表。

在本文中，您将学习如何使用D3js来在react中搭建一个d3力导向图。力导向图是一种特殊的图表，它能够将数据中的节点和连线以一种自然且美观的方式呈现出来。

D3js介绍

D3js是一个基于Html、CSS和svg/canvas的js数据可视化库。它允许您将数据绑定到DOM元素上，然后使用这些元素来创建图表。D3js提供了丰富的函数库，您可以使用这些函数库来创建各种各样的图表，包括条形图、折线图、散点图、饼图等等。

React介绍

React是一个由Facebook开发的JavaScript库，用于构建用户界面。它使用虚拟DOM来实现高性能的渲染，并提供了丰富的组件库，可以帮助您快速构建出复杂的用户界面。

D3js与React的结合

D3js和React是两个非常强大的库，它们可以很好地结合在一起，来创建出美观且具有交互性的数据可视化图表。D3js负责图表的外观和行为，而React负责界面的交互和状态管理。

搭建D3力导向图

以下是如何在react中使用D3js搭建一个d3力导向图的步骤：

导入必要的库

import * as d3 from "d3";
import React, { useEffect, useRef } from "react";

创建画布

const Chart = () => {
  const ref = useRef();

  useEffect(() => {
    const svg = d3
      .select(ref.current)
      .append("svg")
      .attr("width", width)
      .attr("height", height);
  }, []);

  return <svg ref={ref} />;
};

加载数据

const data = [
  { id: 1, name: "Node 1", x: 100, y: 100 },
  { id: 2, name: "Node 2", x: 200, y: 200 },
  { id: 3, name: "Node 3", x: 300, y: 300 },
];

创建力导向图模拟

const simulation = d3
  .forceSimulation()
  .force("link", d3.forceLink().id((d) => d.id))
  .force("charge", d3.forceManyBody().strength(-100))
  .force("center", d3.forceCenter(width / 2, height / 2));

将数据绑定到力导向图模拟

simulation.nodes(data).on("tick", ticked);

创建节点

const nodes = svg
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 10)
  .attr("fill", "steelblue")
  .call(d3.drag().on("drag", (event, d) => {
    d.fx = event.x;
    d.fy = event.y;
  }));

创建连线

const links = svg
  .selectAll("line")
  .data(data)
  .enter()
  .append("line")
  .attr("stroke", "black")
  .attr("stroke-width", 2);

启动力导向图模拟

simulation.alpha(1).restart();

更新图表

function ticked() {
  nodes
    .attr("cx", (d) => d.x)
    .attr("cy", (d) => d.y);

  links
    .attr("x1", (d) => d.source.x)
    .attr("y1", (d) => d.source.y)
    .attr("x2", (d) => d.target.x)
    .attr("y2", (d) => d.target.y);
}