d3js学习——8.绘制折线图

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

svg 中的原点(0,0)位于左上角。

绘制折线图的步骤：

1.先写一个svg标签，定好宽和高

<svg id="chart" width="400" height="300"></svg>

2.定义一个数据集合和一些变量

const data = [
    { year: 2010, value: 10 },
    { year: 2011, value: 20 },
    { year: 2012, value: 15 },
    { year: 2013, value: 25 },
    { year: 2014, value: 30 },
    { year: 2015, value: 18 },
];
const svg = d3.select("#chart"),
    margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,

3.添加一个群组，并加入transform属性

const g = svg
  .append("g")
  .attr(
    "transform",
    "translate(" + margin.left + "," + margin.top + ")"
  );

4.设置x,y的比例尺

d3.scaleLinear()是线性比例尺

d3.scaleTime()是时间比例尺，刻度可以是年、月、日

.domain()是刻度数值的范围

range()是刻度位置的范围

const x = d3
    .scaleTime()
    .domain(
      d3.extent(data, function (d) {
        return new Date(d.year);
      })
    )
    .range([0, width]);

const y = d3
    .scaleLinear()
    .domain([
      0,
      d3.max(data, function (d) {
        return d.value;
      }),
    ])
    .range([height, 0]);

5.创建折线生成器

.line().x()是x轴

.line().y()是y轴

const line = d3
    .line()
    .x(function (d) {
      return x(d.year);
    })
    .y(function (d) {
      return y(d.value);
    });

6.绘制x轴和y轴

.ticks(num)是指定刻度的数量

.tickFormat(d2.format("d"))是格式化刻度为整数

g.append("g")
    .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x).ticks(data.length).tickFormat(d3.format("d")))
    .append("text")
    .attr("fill", "black")
    .attr("x", width + 10)
    .attr("y", -10)
    .attr("text-anchor", "end")
    .text("年份"); // x轴的名称

  g.append("g")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end")
    .text("值"); // y轴的名称

7.绘制折线——添加一些样式信息

 g.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 1.5)
    .attr("d", line);

完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>D3.js 折线图示例</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
  </head>
  <body>
    <svg id="chart" width="400" height="300"></svg>

    <script>
      // 数据集
      const data = [
        { year: 2010, value: 10 },
        { year: 2011, value: 20 },
        { year: 2012, value: 15 },
        { year: 2013, value: 25 },
        { year: 2014, value: 30 },
        { year: 2015, value: 18 },
      ];
      // 设置SVG容器和边距
      const svg = d3.select("#chart"),
        margin = { top: 20, right: 20, bottom: 30, left: 50 },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg
          .append("g")
          .attr(
            "transform",
            "translate(" + margin.left + "," + margin.top + ")"
          );

      // 设置x和y比例尺
      const x = d3
        .scaleTime()
        .domain(
          d3.extent(data, function (d) {
            return new Date(d.year);
          })
        )
        .range([0, width]);

      const y = d3
        .scaleLinear()
        .domain([
          0,
          d3.max(data, function (d) {
            return d.value;
          }),
        ])
        .range([height, 0]);

      // 创建折线生成器
      const line = d3
        .line()
        .x(function (d) {
          return x(d.year);
        })
        .y(function (d) {
          return y(d.value);
        });

      // 绘制x轴和y轴
      g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(data.length).tickFormat(d3.format("d")))
        .append("text")
        .attr("fill", "black")
        .attr("x", width + 10)
        .attr("y", -10)
        .attr("text-anchor", "end")
        .text("年份");

      g.append("g")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("值");

      // 绘制折线
      g.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line);
    </script>
  </body>
</html>
婉兮娈兮
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS+html5 canvas实现的简单绘制折线图效果示例
12-12
本文实例讲述了JS+html5 canvas实现的简单绘制折线图效果。分享给大家供大家参考，具体如下： 1、实例代码： <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>画图</title> <style> #divContainer{ margin-top: 20px; text-align: center; } #cv{ width: 300px; height: 200px;
Vue + D3 动态可视化图实现之一：折线图
アルタイル
02-07 3301
GTD数据分析及可视化项目的第一张图表，项目总体介绍见这篇文章。 最终效果 实现 数据集 目标是做出世界、地区、国家三级所有选项的图表。原数据集中有地区（region）和国家（country）的编码，增加编码“1”，代表全世界。在数据表中使用这一编码，按年份统计袭击次数，死亡人数，受伤人数。在项目中用json文件记录层级关系及编码和文本的对应关系。 二级联动菜单 这个不细说了，网上一查教程很多。思路是通过v-model分别将一级、二级select框绑定到form.type和form.detailedT
D3.js实现折线图的方法详解
10-21
众所周知图表是数据图形化的表示，通过形象的图表来展示数据，比如条形图，折线图，饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据，提高生产的效率和 Web 应用和项目的可靠性。现在就让我们大家一起来学习用D3.js来实现折线图。
基于d3.js实现实时刷新的折线图
10-21
本文用实例演示如何用d3.js实现实时刷新的折线图,非常具有实用价值,需要的朋友可以参考下。
D3.js学习笔记七:多系列折线图与图例
热门推荐
csdn_huangyumin的博客
12-01 1万+
http://www.daliane.com/d3_js_xue_xi_bi_ji_qi_duo_xi_lie_zhe_xian_tu_yu_tu_li/ 要解决的问题 现在这个统计图还要解决几个问题：支持多个系列、为多系列加入图例。 现在的数据是单条折线，如果有多条折线，那么需要为它指定不同的名称和颜色，为它们指定图例，指定图例以后，我们通过图例来控制折线的显示
D3.js(3) path/折线图
Michelle209的博客
04-22 1091
调试的时候把定时器的时间设置的比transition短很多，感觉图像每次都没画到位，在这停了好久。文档：https://github.com/d3/d3-shape/tree/v1.3.7。最后那个所有折线的汇总和颜色标签是修改了源代码自己添加的效果，学有成效就好~元素是用来绘制各种形状（例如线条、曲线、弧形、圆弧等）的元素。属性是一个字符串，包含一系列的命令和参数，用来描述路径的形状。属性用来定义绘制的路径。
D3基本图表绘制——折线图
m0_63150077的博客
02-02 4733
制作折线图分成4步走： 1.首先划定制图区域和范围——画一个边框 2.数据处理得到绘制折线图需要的数据——绘制折线需要一个数组整体 3.画出x，y轴和折线——y轴绘制需要注意 4.补充标签，调节位置
原生js实现折线图（canvas详解）
kitty_ELF的博客
04-16 6780
这篇文章的起源就是之前用的都是ECharts突然有一天想自己用js手写一个折线图，所以我就从canvas开始学习了。 首先给大家看一下通过学习，我最后完成的折线图： 内容： x轴及平行刻度线 x轴、y轴坐标刻度 折点的数据显示 缺点： 线条样式的动态变换 y轴刻度算法 一点都不酷炫！！！ 一、Canvas介绍1、画布的创建2、设置画布的宽高和背景色3、设置渐变色3.1、线性渐变3.2、放射状/圆形渐变4、画布的变换4.1画布平移（translate）4.2、画布旋转（rotate）4.3 画布缩
【数据可视化】【1】手把手教你使用d3.js绘制折线图
C++程序猿
01-09 1608
借助于强大的d3.js实现折线图的绘制，涵盖了数据可视化的基本概念及d3库的使用技巧。本文分享了绘制折线图的步骤，包括数据准备、轴的添加以及样式的调整。通过本文，读者可以快速了解在web开发中如何借助三方库绘制折线图。
chart.js使用学习——折线图（1：基本用法)
gc_2299的博客
08-18 4398
学习chart.js中折线图的基本用法
d3.js 绘制心电图以及网格
03-09
d3.js 绘制心电图以及网格
d3-line-chart:使用 d3.js 轻松绘制折线图
06-19
一个 d3.js 库，可帮助您轻松绘制折线图。 如何使用它 包括d3.js , d3-line-char.js < script type = "text/javascript" src = "./d3.js" charset = "utf-8" > < / script > < script type = "text/...
使用D3.js库绘制曲线图
04-11
【无需积分】 D3.js可视化库可以绘制曲线图。资源中xml文件包含了所有数据点，js文件调用D3库绘图，html文件展示绘图结果，css文件改变绘图样式。可以使用IE浏览器打开。
d3.js学习（时间轴-多折线图）
qq_25687271的博客
03-01 6273
根据项目的要求，利用d3.js画出x轴为时间轴，多条折线的折线图，看了官方的文档和很多参考资料才做了出来。所以想分享给程序猿朋友们。（网上找的基本上都不满足需求。只能靠自己一步一步写下来） 成果曲线图： step1: 准备数据 // 数据，{ x： 为时间轴，y： 相对应的值} var trendData = [ [{'x':'2018-02-01','y':1},{'x...
如何使用数据可视化库 D3 绘制折线统计图
太空编程
03-02 827
如题，如何使用数据可视化库 D3 绘制折线统计图？这篇文章将通过实例来讲解如何一步一步绘制下面这样一个折线统计图，并带有鼠标悬浮移动的文字显示效果。首先，我们来看下什么是 d3？移步官网：https://d3js.orgD3（或D3.js）是一个用于可视化数据的免费开源JavaScript库。其基于web标准的低级别方法在创作动态、数据驱动的图形方面提供了无与伦比的灵活性。 十多年来，D3为开创性...
D3.js之折线图动画
KJBU2
11-28 8011
主要实现的效果一个折线图，然后线条可以从头到尾的出现。 折线图的代码基本上是别人的(本人也是正在学习的)，自己只是在这上面基础上添加动画和一些文字和circle 参考：参考折线图的博客 参考SVG动画博客 .axis path, .axis line{ fill:none; stroke:black;
用JS写的一个好看的折线图
拿铁不懂绿茶
02-28 1万+
之前做移动端项目的时候，有要显示图表的需求， 但是由于设计师设计的太漂亮， 一般的第三方控件不加修改的话都不太满足， 如果引进了的话， 要修改的东西太多了， 也不好修改，废话不多说， 先上图：至于怎么实现了，其实也蛮简单的，canvas自己一个个画的。以下是源码：/** * Created by freeson on 2017/10/24. */ export const lineChart...
js实现折线图
liuyongfang0211的博客
01-23 2440
//绘制折线图 function DrawBar(data, id, titletext) {       var xData = [];       var datas = [];              for(var i = 0; i &lt; data.length; i++){           xData.push(data[i].xAxisData || ",");       ...
FME学习之旅---day27
最新发布
summer_corner的博客
05-17 214
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
使用D3.js绘制亚洲地图
05-03
要使用D3.js绘制亚洲地图，需要先准备一些地理数据。以下是一个简单的步骤： 1. 下载亚洲地图的地理数据，可以从这里下载：https://geojson-maps.ash.ms/ 2. 在HTML文件中添加一个SVG元素，设置它的宽度和高度，以及一个类名： ``` <svg class="map" width="800" height="600"></svg> ``` 3. 在JavaScript文件中使用D3.js加载地理数据，并创建一个地图投影： ``` var svg = d3.select(".map"); var projection = d3.geoMercator() .center([105, 38]) .scale(600) .translate([400, 300]); var path = d3.geoPath().projection(projection); d3.json("asia.geojson", function(error, data) { if (error) throw error; svg.append("g") .selectAll("path") .data(data.features) .enter() .append("path") .attr("d", path); }); ``` 4. 以上代码将地图数据加载到svg元素中，使用地图投影将地理数据转换为地图路径，并将路径添加到地图中。 这是一个简单的亚洲地图的D3.js代码示例。您可以根据需要进行调整和修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值