使用d3.js开发树状图并为不同属性添加不同颜色

Live&&learn

于 2024-10-18 10:45:09 发布

阅读量1k

点赞数 24

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_55800388/article/details/143035802

版权

D3.js使用

D3.js的优势：相对echarts等可视化库，允许用户通过JavaScript对可视化效果进行深度定制，以满足各种特定需求。

1.官网

官网：https://d3js.org/

github地址： https://github.com/d3/d3/wiki

官方API：https://github.com/d3/d3/blob/master/API.md

2.使用

使用原生Js和d3.js开发树状图

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Node-Link Tree</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>
  <div id="chart"></div>
  <script>
    //对象中的属性名是灵活的，和js对应即可
    const dataObj = {
     
      label: "R",
      style: {
     
        color: "#000",
        background: "#00ff00"
      },
      children: [
        {
     
          label: "R0",
          style: {
     
            color: "#000",
            background: "#ffff00"
          },
        },
        {
     
          label: "R1",
          style: {
     
            color: "#000",
            background: "#0000ff"
          },
          children: [
            {
     
              label: "R11",
              style: {
     
                color: "#000",
                background: "#ff0000"
              },
            },
            {
     
              label: "R12",
              style: {
     
                color: "#000",
                background: "#00ff00"
              },
            },
          ],
        },
        {
     
          label: "R2",
          style: {
     
            color: "#000",
            background: "#ffff00"
          },
        },
        {
     
          label: "R3"

最低0.47元/天解锁文章