d3js学习——7.绘制图形

最新推荐文章于 2024-01-25 11:22:08 发布
最新推荐文章于 2024-01-25 11:22:08 发布
阅读量358 收藏
点赞数
分类专栏： d3js 文章标签： 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44535441/article/details/131717669
版权

条形图

使用d3js绘制条形图的步骤：

1.条形图的样式

svg rect {
	fill: gray;
}
svg text {
    fill: yellow;
    font: 12px sans-serif;
    /* 将文本定位到条的右端 */
    text-anchor: end;
}

2.设置变量值

const data = [10, 20, 23, 14];
//定义 svg的宽度、缩放到屏幕上可见的像素值、水平条的静态高度
const width = 500,
	scaleFactor = 20,
	barHeight = 30;

3.添加svg元素并设置宽高

const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", barHeight * data.length);

4.创建组元素，并设置条形图排列的样式

 const bar = svg
    .selectAll("g")
    .data(data)
    .enter()
    .append("g")
 // 上下间隔分开
    .attr("transform", function (d, i) {
      return "translate(0," + i * barHeight + ")";
    });

5.添加rect元素

bar.append("rect")
    .attr("width", function (d) {
      return d * scaleFactor;
    })
    .attr("height", barHeight - 1);

6.添加数据（文本）

bar.append("text")
    .attr("x", function (d) {
      return d * scaleFactor;
    })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em") // 偏移，用于垂直对齐文本
    .text(function (d) {
      return d;
    });

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>条形图</title>
    <style>
      svg rect {
        fill: gray;
      }
      svg text {
        fill: yellow;
        font: 12px sans-serif;
        /* 将文本定位到条的右端 */
        text-anchor: end;
      }
    </style>
  </head>
  <body>
    <script>
      const data = [10, 20, 23, 14];
      //   定义 svg的宽度、缩放到屏幕上可见的像素值、水平条的静态高度
      const width = 500,
        scaleFactor = 20,
        barHeight = 30;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", barHeight * data.length);
      const bar = svg
        .selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", function (d, i) {
          return "translate(0," + i * barHeight + ")";
        });
      bar
        .append("rect")
        .attr("width", function (d) {
          return d * scaleFactor;
        })
        .attr("height", barHeight - 1);
      bar
        .append("text")
        .attr("x", function (d) {
          return d * scaleFactor;
        })
        .attr("y", barHeight / 2)
        .attr("dy", ".35em")
        .text(function (d) {
          return d;
        });
    </script>
  </body>
</html>

圆图

使用d3js绘制圆图的步骤：

1.添加变量

const width = 400; // svg宽度
const height = 400; // svg高度
const data = [10, 20, 30]; // 数据元素数组
const colors = ["green", "purple", "red"]; // 对应块的颜色

2.添加 svg 元素

const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

3.添加群组，进行转换

const group = svg
    .selectAll("g") // 创建用于保持圆圈的组元素
    .data(data) // 将数据绑定到组元素
    .enter() // 为组元素创建占位符
    .append("g") // 添加组元素
    .attr("transform", function (d, i) {
      return "translate(0,0)";  // 相对于原点定位元素
    });

4.添加圆形元素

group
    .append("circle")
    .attr("cx", function (d, i) {  // 每个圆的中心x坐标
      return i * 75 + 50;
    })
    .attr("cy", function (d, i) {  // 每个圆的中心y坐标
      return 75;
    })
    .attr("r", function (d) {   // 每个圆的半径
      return d * 1.5;
    })
    .attr("fill", function(d,i){  // 填充相应颜色
            return colors[i]
     });

5.显示数据

group
    .append("text")
    .attr("x", function (d, i) { // 坐标
      return i * 75 + 25;
    })
    .attr("y", 30)
    .attr("stroke", "teal") // 颜色
    .attr("font-size", "10px")
    .attr("font-family", "sans-serif")
    .text(function (d) { // 内容
      return d;
    });

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>圆形</title>
    </style>
  </head>
  <body>
    <script>
      const width = 400; // svg宽度
      const height = 400; // svg高度
      const data = [10, 20, 30]; // 数据元素数组
      const colors = ["green", "purple", "red"]; // 对应块的颜色
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
      const group = svg
        .selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", function () {
          return "translate(0,0)";
        });
      group
        .append("circle")
        .attr("cx", function (d, i) {
          return i * 75 + 50;
        })
        .attr("cy", function (d, i) {
          return 75;
        })
        .attr("r", function (d) {
          return d * 1.5;
        })
        .attr("fill", function (d, i) {
          return colors[i];
        });

      group
        .append("text")
        .attr("x", function (d, i) {
          return i * 75 + 25;
        })
        .attr("y", 30)
        .attr("stroke", "teal")
        .attr("font-size", "10px")
        .attr("font-family", "sans-serif")
        .text(function (d) {
          return d;
        });
    </script>
  </body>
</html>

饼状图

需要用到的两种方法：

  • arc()：生成一个弧，需要设置内半径和外半径，内半径为0是饼图，否则是圆环图
  • pie()：生成饼图，从数据集中获取数据并计算饼图的每个楔形的起始角度和结束角度

使用d3js绘制饼图的：

1.定义变量

// 数据
const data = [
    { label: "苹果", value: 30 },
    { label: "香蕉", value: 20 },
    { label: "橙子", value: 50 },
    { label: "西瓜", value: 60 },
    { label: "榴莲", value: 40 },
];
// 宽度和高度
const width = 400;
const height = 400;
// 半径
const radius = Math.min(width, height) / 2;

2.创建SVG元素并设置宽高属性

const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

3.创建饼图的布局

const pie = d3.pie().value(function(d){
    return d.value;
})

4.创建弧生成器

const arc = d3.arc()
	.outerRadius(radius-10)
	.innerRadius(0)

5.创建颜色比例尺

const color = d3.scaleOrdinal(d3.schemeCategory10)

6.创建扇形

const arcs = svg
    .selectAll("arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

7.绘制扇形路径

arcs
    .append("path")
    .attr("d", arc)
    .attr("fill", function (d, i) {
      return color(i);
    });

8.添加扇形每部分的标签

arcs
    .append("text")
    .attr("transform", function (d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text(function (d) {
      return d.data.label;
    });

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .arc text {
        font: 12px arial;
        text-anchor: middle;
      }
      .arc path {
        stroke: #fff;
      }
      .title {
        fill: green;
        font-weight: italic;
      }
    </style>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <script>
      // 数据
      const data = [
        { label: "苹果", value: 30 },
        { label: "香蕉", value: 20 },
        { label: "橙子", value: 50 },
        { label: "西瓜", value: 60 },
        { label: "榴莲", value: 40 },
      ];

      // 宽度和高度
      const width = 400;
      const height = 400;

      // 半径
      const radius = Math.min(width, height) / 2;

      // 创建svg元素
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

      // 创建饼图布局
      const pie = d3.pie().value(function (d) {
        return d.value;
      });

      // 创建弧生成器
      const arc = d3
        .arc()
        .outerRadius(radius - 10)
        .innerRadius(0);

      // 创建颜色比例尺
      const color = d3.scaleOrdinal(d3.schemeCategory10);

      // 创建扇形
      const arcs = svg
        .selectAll("arc")
        .data(pie(data))
        .enter()
        .append("g")
        .attr("class", "arc")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

      // 绘制扇形路径
      arcs
        .append("path")
        .attr("d", arc)
        .attr("fill", function (d, i) {
          return color(i);
        });

      // 添加标签
      arcs
        .append("text")
        .attr("transform", function (d) {
          return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        .text(function (d) {
          return d.data.label;
        });
    </script>
  </body>
</html>

甜甜圈图

相对于饼状图，甜甜圈图只需要将第四步的弧的innerRadius()>0即可，其余代码一样

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .arc text {
        font: 12px arial;
        text-anchor: middle;
      }
      .arc path {
        stroke: #fff;
      }
      .title {
        fill: green;
        font-weight: italic;
      }
    </style>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <script>
      // 数据
      const data = [
        { label: "苹果", value: 30 },
        { label: "香蕉", value: 20 },
        { label: "橙子", value: 50 },
        { label: "西瓜", value: 60 },
        { label: "榴莲", value: 40 },
      ];

      // 宽度和高度
      const width = 400;
      const height = 400;

      // 半径
      const radius = Math.min(width, height) / 2;

      // 创建svg元素
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

      // 创建饼图布局
      const pie = d3.pie().value(function (d) {
        return d.value;
      });

      // 创建弧生成器
      const arc = d3
        .arc()
        .outerRadius(radius - 10)
        .innerRadius(100);

      // 创建颜色比例尺
      const color = d3.scaleOrdinal(d3.schemeCategory10);

      // 创建扇形
      const arcs = svg
        .selectAll("arc")
        .data(pie(data))
        .enter()
        .append("g")
        .attr("class", "arc")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

      // 绘制扇形路径
      arcs
        .append("path")
        .attr("d", arc)
        .attr("fill", function (d, i) {
          return color(i);
        });

      // 添加标签
      arcs
        .append("text")
        .attr("transform", function (d) {
          return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        .text(function (d) {
          return d.data.label;
        });
    </script>
  </body>
</html>
婉兮娈兮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
D3.js SVG绘图实践：趋势缩略图
沉淀
08-13 8892
前言写码，看书，思考，这周挺多感触的。因为手上的项目前端用了Angular，所以UI改版的时候考虑了Angular-material，学校的项目前端用了React，所以也想接入ant-design mobile的那套设计规范，这两个都是业界非常不错的UI库，看他们的文档都会让你觉得能使手上的web应用瞬间高大上起来。其实不然，即便是开源，也不是拿来就用那么美好，那晚尝试接入ant-design的轮播
d3js画矩形图
hb707934728的博客
02-24 7642
做一个简单的图表 var width = 800; //画布的宽度 var height = 500; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个svg元素 .attr("width", width) //设定宽度 .attr(
15种独一无二的创新数据可视化方式
读芯术的博客
09-20 1452
全文共5489字，预计学习时长11分钟可视化能解答那些尚未发现的问题。本·施耐德曼（Ben Shneiderman）掌握数据可视化技术会打开新世界的大门，带来更多机会。精...
使用 d3.js 绘制资源拓扑图
Fish
12-30 5861
使用 d3.js 绘制资源拓扑图 wzb 网易游戏高级开发工程师，现主要负责 CMDB 的前端开发工作 背景 随着业务的发展，项目下的各种资源会越来越多，越来越复杂。如何提供一种让用户快捷查看全局资源与模型关联关系的能力呢？资源拓扑图便是一种很好的方式。 本文将尽量简化业务上的内容，重点介绍如何使用 d3.js 来进行前端拓扑图的绘制。 为什么选择 d3?d3.js (data driv...
D3.js绘制基本图形
qq_39355295的博客
02-16 3051
d3.js 绘制基本图形 最近开始学习d3.js 主要是，初步认识d3.js,并且运行D3.jsD3.js数据可视化（data visualization）环境. 因为之前没有接触郭d3，因为业务需求，需要绘制一系列的图表，所以上来直接学习绘制，刚开始经过一天的简单了解，懂得了d3绘制代码的基本格式，然后开始搜索自己需要的图形的基本模板，然后根据自己的 实际业务需求来进行基本的更改，这样就需要我们...
d3 半圆 等级分层图
weixin_38491286的博客
08-31 96
/计算差的平方总和。//计算数组元素与平均值的差。//定义一个临时空数组，用来存储每个数组元素与平均值的差的平方。var avg = function (arr) { //计算平均值 函数。//用来存储差的平方总和。
d3js绘制热力图
qq_44476091的博客
06-14 623
【代码】d3js绘制svg热力图
前端使用d3.js来绘制图表
weixin_43578304的博客
01-25 598
D3.js 是一个用于创建数据驱动的文档的 JavaScript 库。它提供了一组易于使用的 API，可以帮助开发者快速创建各种类型的图表和可视化效果。D3.js 的主要特点是使用数据驱动的文档，这意味着您可以使用任何格式的数据来创建可视化效果，包括 CSV、JSON、XML 等，你可以通过自定义 HTML、CSS 和 JavaScript 来实现复杂的图形和交互效果。当然ECharts 也不错选择哪种工具取决于具体的需求和项目。如果需要更多的定制性和灵活性，可以选择 D3.js；
[数据与分析可视化] D3入门教程2-在d3中构建形状
You and Me
11-28 1076
d3.js入门教程2-在 d3.js中构建形状 文章目录d3.js入门教程2-在 d3.js中构建形状形状的添加圆形的添加矩形的添加线段的添加文本的添加折线的添加区域的添加圆弧的添加参考 d3.js是一个用于绘图的JavaScript 库。 它可以可视化展示任何类型的数据。 d3.js允许绘制形状，然后将各种形状构建一个图形。本文档描述了一些函数，可以更有效地从数据中绘制svg。 形状的添加 圆形的添加 在svg中绘制圆形。需要三个参数：分别代表圆心x位置的cx、圆心y位置的cy和半径的r。基础调用函数如下
d3.js 绘制心电图以及网格
03-09
d3.js 绘制心电图以及网格
d3.v5.min.js
11-09
d3.v5.min.js资源下载，关于数据驱动的文档的javascript类库，用于使用Web标准可视化数据。D3帮助您使用SVG、画布和HTML将数据带入生活。D3将强大的可视化和交互技术与数据驱动的DOM操作方法结合起来，为您提供了...
D3_demo:D3.js绘制的图表
05-27
简单的D3图表示例(整理不易，点个star，这次一定) 直方图 (barChart) 散点图 (scatterChart) 折线图 (lineChart) 饼图 (pieChart) 雷达图 (radarChart) 矩形树状图 (treeMapChart) 树图 (treeChart) 封闭图 ...
d3.js实现图形拖拽
10-15
主要为大家详细介绍了d3.js实现图形拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-d3-demo:使用Vue.js + D3.js绘制图形的演示
05-17
d3-demo 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production...
SVG可伸缩矢量图形学习笔记
yaoqian的博客
09-28 1250
首先SVG是XML文件，SVG图像可以用任何文本编辑器创建，但它往往是与一个绘图程序一起使用，如Inkscape，更方便地创建SVG图像。 示例文件：                  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">                 stroke-width="2" fill="red" />
二。D3.js 绘制一个简单的图形--圆形
姜兴的专栏
07-18 855
<html> <head> <metacharset="utf-8"> <title>D3第一个圆形</title> <scriptsrc="http://d3js.org/d3.v3.min.js"charset="utf-8"></script> </head> <body> </body> <script> ...
D3.js绘图流程
李文韬的博客
02-18 2013
D3.js是由javaScript语言编写绘图库，其原理是：通过调用一系列内置函数，生成SVG，并在网页渲染。 本文以频率分布直方图案例为例，介绍使用D3.js的流程
D3.JS中常用的绘制图形的的API
weixin_57182748的博客
07-20 322
D3.JS中常用的绘制图形的的API其实SVG 提供的图形标签（圆形、矩形、线条、路径等）其实只是构成图形的基本元素，一张完整图表则是由几百个这些小元件组成的，如果只使用 SVG 提供的图形，就需要很辛苦地一个一个建立图形，才能完成一张图表。为了省去这个麻烦，D3 创建了很多不同的 API 来协助建构复杂图形/图表，常用的 有如下几种。
【D3.js 学习记录】—— SVG入门知识，使用D3绘制基本图形
RRie1的博客
08-02 2044
2021.07.29【Note1】 SVG入门知识 今天开始学习d3.js，将笔记整理为博客以记录自己的学习过程。 视频资源来自于B站Up主 小魁少爷，是一位清华大学的学长，使用的好像是D3 version 5+,很适合初学者观看。 目前采用的学习策略是先过一遍视频（因为时常没多长），接着再过一遍官方的教学文档，并上手做一些可视化项目 所有参考资源我附在了文末 SVG简介 svg与 jpeg，png的区别 由于jpeg，png的像素表达能力有限，因此放大一百倍后会出现失真的现象。 svg操作的是矢量
天地图d3.js绘制图形
最新发布
05-15
天地图d3.js是一种数据可视化工具，它可以使用JavaScript语言绘制各种图表和图形，例如折线图、柱状图、散点图、地图等等。它是基于d3.js和天地图API开发的一种工具，可以方便地在Web应用程序中展示地理信息数据。 使用天地图d3.js可以通过简单的代码实现各种地理信息可视化，如绘制中国地图、世界地图等等。通过天地图API提供的服务，可以获取各种地理信息数据，如行政区划数据、路网数据等等。在绘制地图的过程中，可以添加各种样式和标记，使得地图更加美观和易于理解。 如果您想学习如何使用天地图d3.js绘制图形，可以先了解d3.js的基本知识，并熟悉天地图API的使用方法。接着可以参考官方文档或者其他相关资源来学习如何使用天地图d3.js绘制各种图形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值