数据可视化 -- D3.JS

最新推荐文章于 2024-05-03 18:08:38 发布
最新推荐文章于 2024-05-03 18:08:38 发布
阅读量402 收藏 3
点赞数 1
分类专栏： 高阶技术专题 笔记 文章标签： 数据可视化 d3.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50983325/article/details/120965811
版权

svg绘制图形

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg绘制图形</title>
</head>

<body>
  <svg width="1000" height="600">
    <!-- 01 绘制矩形 -->
    <rect x="40" y="40" width="300" height="200" style="fill:orangered; stroke: pink; stroke-width: 4"></rect>

    <!-- 02 绘制圆角矩形 -->
    <rect x="40" y="40" width="300" rx="20" ry="20" height="200" style="fill:orangered; stroke: pink; stroke-width: 4">
    </rect>

    <!-- 03 绘制圆形 -->
    <circle cx="200" cy="200" r="100" style="fill: darkblue"></circle>

    <!-- 04 椭圆 -->
    <ellipse cx="200" cy="200" rx="80" ry="40" style="fill: seagreen"></ellipse>

    <!-- 05 绘制线条 -->
    <line x1="100" y1="40" x2="500" y2="60" style="stroke:#333; stroke-width: 4"></line>

    <!-- 06 绘制多边形 -->
    <polygon points="200, 40, 400, 50, 100, 50" style="fill: lightblue; stroke-width: 2; stroke: red"
      transform="translate(100, 100)"></polygon>

    <!-- 07 绘制文字 -->
    <text x="200" y="200" style="fill: orange; font-size: 40" textLength="200">拉勾教育</text>

  </svg>
</body>

</html>

d3操作svg

  • 获取元素

    console.log(d3.select('#box'))
console.log(d3.select('#box p'))
console.log(d3.selectAll('#box p'))
console.log(d3.selectAll('div'))

  • 获取元素属性

    console.log(+d3.select('rect').attr('width') === 300)

  • 设置属性

    d3.select('rect')
  .attr('fill', 'seagreen')
  .attr('transform', 'translate(100, 100)')

  • 添加元素

    d3.select('svg').append('rect')
  .attr('x', 100)
  .attr('y', '200')
  .attr('width', '200')
  .attr('height', '100')
  .attr('fill', 'lightblue')

d3.select('svg').append('text')
  .attr('x', 100)
  .attr('y', 260)
  .attr('fill', 'red')
  .attr('font-size', 20)
  .attr('textLength', 200)
  .text('拉勾教育')

  • 删除元素

    d3.selectAll('rect').remove()

绑定数据

// 01 添加 svg 
d3.select('body').append('svg')
  .attr('width', 600)
  .attr('height', 400)

// 02 定义数据 
const data = [
  { cx: 100, cy: 100, r: 10, fill: 'orange' },
  { cx: 130, cy: 140, r: 20, fill: 'seagreen' },
  { cx: 230, cy: 240, r: 19, fill: 'lightblue' },
]

// 03 绘制圆形
d3.select('svg').selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', d => d.cx)
  .attr('cy', d => d.cy)
  .attr('r', d => d.r)
  .attr('fill', d => d.fill)

绘制直方图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制直方图</title>
  <script src="./d3.min.js"></script>
  <style>
    div svg {
      display: block;
      margin: 40px auto 0;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <div id="svg"></div>
  <script>
    // 定义数据
    const width = 700
    const height = 400
    const rectStep = 40
    const rectWidth = 30
    const data = [10, 50, 180, 122, 90, 230, 250, 300]

    // 定义填充
    const margin = { left: 20, right: 20, top: 20, bottom: 20 }

    // 定义线性比例尺
    const linear = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([0, 300])

    // 创建 svg 
    d3.select('#svg').append('svg')
      .attr('width', width)
      .attr('height', height)

    // 绘制矩形
    d3.select('svg').selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', (d, i) => margin.left + i * rectStep)
      .attr('y', d => height - linear(d) - margin.bottom)
      .attr('width', rectWidth)
      .attr('height', d => linear(d))
      .attr('fill', 'lightblue')

    // 绘制文字
    d3.select('svg').selectAll('text')
      .data(data)
      .enter()
      .append('text')
      .attr('fill', '#666')
      .attr('font-size', '20')
      .attr('x', (d, i) => margin.left + i * rectStep)
      .attr('y', d => height - d - margin.bottom - 5)
      .attr('text-anchor', 'middle')
      .attr('transform', `translate(${rectWidth / 2})`)
      .text(d => d)
  </script>
</body>

</html>

D3常见比例尺

  • scaleLinear – 线性比例尺
    使用d3.scaleLinear()创造一个线性比例尺，而domain()是输入域，range()是输出域，相当于将domain中的数据集映射到range的数据集中。

    let scale = d3.scaleLinear().domain([1,5]).range([1,100])

console.log(scale(1)) // 1
console.log(scale(4)) // 75
console.log(scale(5)) // 100
scale.clamp(true)
console.log(scale(-1)) // 1
console.log(scale(10)) // 100

  • scaleBand – 序数比例尺
    ，d3.scaleBand()并不是一个连续性的比例尺，domain()中使用一个数组，不过range()需要是一个连续域。

    scale = d3.scaleBand()
 .domain([1, 2, 3, 4])
 .range([0, 100])
console.log(scale(1)) // 0
console.log(scale(2)) // 25
console.log(scale(3)) // 50
console.log(scale(4)) // 75
console.log(scale(0)) // undefined
console.log(scale(10)) // undefined

  • scaleOrdinal – 序数比例尺
    d3.scaleOrdinal()的输入域和输出域都使用离散的数据。

    scale = d3.scaleOrdinal()
 .domain(['lg', 'syy', 'zce'])
 .range([18, 22, 40, 50])
console.log(scale('lg')) // 18
console.log(scale('syy')) // 22
console.log(scale('zce')) // 40
console.log(scale('abc')) // 50
console.log(scale('abcde')) // 18

  • scaleQuantize – 量化比例尺
    d3.scaleQuantize()也属于连续性比例尺。定义域是连续的，而输出域是离散的。

    scale = d3.scaleQuantize().domain([0, 10]).range(['xl', 'm', 's'])
console.log(scale(3.4)) // m
console.log(scale(4)) // m
console.log(scale(6.7)) // s
console.log(scale(-10)) // xl
console.log(scale(30)) // s

比例尺与坐标轴

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>比例尺与坐标轴</title>
  <script src="./d3.min.js"></script>
</head>

<body>
  <div id="box"></div>
  <script>
    // 定义数据
    const width = 600
    const height = 500
    const margin = { left: 50, right: 50, bottom: 50, top: 50 }
    const kindData = ['ES6+', "NodeJS", "Vue", "React", "Angular"]
    const kindPixel = [margin.left, width - margin.right]
    const ratioData = [80, 60, 50, 20, 100]
    const ratioPixel = [height - margin.bottom, margin.top]

    // 设置画布
    d3.select('#box').append('svg')
      .attr('width', width)
      .attr('height', height)

    // 定义比例尺
    const xScale = d3.scaleBand().domain(kindData).rangeRound(kindPixel)
    // 定义坐标刻度生成器
    const xAxis = d3.axisBottom(xScale)
    // 绘制X轴具体的刻度内容
    d3.select('svg').append('g')
      .call(xAxis)
      .attr('transform', `translate(0, ${height - margin.bottom})`)
      .attr('font-size', 14)

    // 定义y轴比例尺
    const yScale = d3.scaleLinear().domain([0, d3.max(ratioData)]).range(ratioPixel)
    const yAxis = d3.axisLeft(yScale)
    d3.select('svg').append('g')
      .call(yAxis)
      .attr('transform', `translate(50, 0)`)
      .attr('font-size', 14)

  </script>
</body>

</html>

D3过渡

// 添加画布
const svg = d3.select('body').append('svg')
  .attr('width', 600)
  .attr('height', 400)

// 绘制图形
const circle = d3.select('svg').append('circle')
  .attr('cx', 100)
  .attr('cy', 100)
  .attr('r', 20)
  .attr('fill', 'seagreen')

// transition duration delay ease 
// 初始状态  结束状态 
circle.attr('cx', 100).attr('cy', 100)

// 结束状态
circle.transition()
  .duration(3000)
  .delay(1000)
  .ease(d3.easeBounce)
  .attr('cx', 500)
  .attr('cy', 300)

带过渡和交互的柱状图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>柱状图带交互</title>
  <style>
    html,
    body {
      width: 100%;
      margin: 0;
    }

    #tip {
      color: #fff;
      display: none;
      margin-top: 15px;
      margin-left: 15px;
      position: absolute;
      padding: 5px 10px;
      border-radius: 3px;
      background: rgba(0, 0, 0, .4);
      font: normal 14px/1em '微软雅黑';
    }
  </style>
  <script src="./d3.min.js"></script>
</head>

<body>
  <script>
    // 画布大小
    const width = 600
    const height = 400

    // 1 添加画布
    const svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height)

    // 2 填充
    const margin = { left: 30, right: 30, top: 20, bottom: 30 }

    // 3 准备源数据
    const data = [10, 20, 30, 40, 36, 25, 18, 5]

    // 4 绘制坐标轴（比例尺）[0, 1 , 2, 3]=>[0, 540]
    const xScale = d3.scaleBand()
      .domain(d3.range(data.length))
      .range([margin.left, width - margin.left - margin.right])
      .padding(0.1)

    // 5 定义X轴的生成器
    const xAxis = d3.axisBottom(xScale)
    // 6 绘制X轴坐标
    const gx = d3.select('svg').append('g')
      .call(xAxis)
      .attr('transform', `translate(0, ${height - margin.bottom})`)

    // 7 绘制Y轴（比例尺  生成器 Y绘制）[5, 40] [30, 400]
    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([height - margin.top - margin.bottom, margin.bottom])
    const yAxis = d3.axisLeft(yScale)
    const gy = d3.select('svg').append('g')
      .call(yAxis)
      .attr('transform', `translate(${margin.left}, ${margin.top})`)

    // 8 绘制柱状图
    const rects = svg.selectAll('.myRect')
      .data(data)
      .enter()
      .append('rect')
      .attr('class', 'myRect')
      .attr('x', (d, i) => xScale(i))
      .attr('y', d => yScale(d))
      .attr('width', xScale.bandwidth())
      .attr('height', d => yScale(0) - yScale(d))
      .attr('fill', 'orange')
      .attr('transform', `translate(0, ${margin.top})`)

    // 提供二个状态
    rects.attr('y', () => yScale(0)).attr('height', 0)
    rects.transition()
      .duration(1000)
      .delay((d, i) => i * 200)
      .ease(d3.easeBounce)
      .attr('y', d => yScale(d))
      .attr('height', d => yScale(0) - yScale(d))

    // 9 绘制文件
    const texts = svg.selectAll('myText')
      .data(data)
      .enter()
      .append('text')
      .attr('class', 'myText')
      .attr('fill', '#666')
      .attr('text-anchor', 'middle')
      .attr('x', (d, i) => xScale(i))
      .text(d => d)
      .attr('transform', `translate(${xScale.bandwidth() / 2}, ${margin.top})`)
      .attr('y', () => yScale(0))
      .transition()
      .delay((d, i) => i * 200)
      .duration(1000)
      .ease(d3.easeBounce)
      .attr('y', (d) => yScale(d) - 5)

    // 自定义缓动类
    class EaseObj {
      constructor(target) {
        this.target = target
        this.pos = { x: width / 2, y: height / 2 }
        this.endPos = { x: 0, y: 0 }
        this._play = false
        this.fm = 0
        this.speed = 0.1
      }
      set animate(value) {
        if (value !== this._play) {
          if (value) {
            this.render()
          } else {
            this.cancel()
          }
          this._play = value
        }
      }

      render() {
        const { pos, endPos, speed, target } = this
        pos.x += (endPos.x - pos.x) * speed
        pos.y += (endPos.y - pos.y) * speed
        target.style('left', `${pos.x}px`)
          .style('top', `${pos.y}px`)

        this.fm = requestAnimationFrame(() => {
          this.render()
        })
      }

      cancel() {
        cancelAnimationFrame(this.fm)
      }
    }

    // 10 定义提示框元素
    const tip = d3.select('body').append('div').attr('id', 'tip')
    // 11 鼠标移上
    rects.on('mouseover', ({ clientX, clientY }, data) => {
      tip.style('left', `${clientX}px`)
        .style('top', `${clientY}px`)
        .style('display', 'block')
        .html(`
          <p>此项平均值：${data}</p>
        `)
    })

    const tipObj = new EaseObj(tip)
    rects.on('mousemove', ({ clientX, clientY }, data) => {
      tipObj.endPos = { x: clientX, y: clientY }
      tipObj.animate = true
    })

    rects.on('mouseout', () => {
      tipObj.animate = false
      tip.style('display', 'none')
    })


    // rects.on('mousemove', ({ clientX, clientY }, data) => {
    //   tip.style('left', `${clientX}px`)
    //     .style('top', `${clientY}px`)
    // })

    // rects.on('mouseout', ({ clientX, clientY }, data) => {
    //   tip.style('left', `${clientX}px`)
    //     .style('top', `${clientY}px`)
    //     .style('display', 'none')
    // })
  </script>
</body>

</html>
christian-dong
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【D3.js-大数据可视化-知识图谱力导向图/引力图谱】数据展示
weichun
06-20 1万+
前段时间做了一个关于大数据可视化的项目，用到了d3.js，不得不说，对于大数据的展示，d3真是做到了极致，话不多说，直接上代码。先从最简单的数据展示开始，每天逐步更新。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src=...
数据可视化-鸢尾花.docx
05-26
总结来说，本实验通过ECharts和D3.js实现了鸢尾花数据的可视化，不仅锻炼了数据处理和图表绘制的技能，还加深了对数据可视化的理解。这种技能在实际工作和研究中非常有价值，可以应用于数据分析、报告制作、决策支持...
D3.js-数据可视化--个人理解总结。
sunmeng_sunmeng的博客
02-20 1354
D3.js，也叫 D3，表示数据驱动文档。 D3 是一个在浏览器里创建动态可视化数据的 JavaScript 库。它基于 web 标准，即 HTML、CSS 和 SVG 技术。 D3 获取输入数据并且映射到相应的可视化内容里。它支持不同的数据格式。 D3 允许将数据绑定到 DOM 上。你可以使用 D3 的内建方法通过 HMTL 或者 SVG 元素实现数据可视化。 D3 提供了大量控制数据的方法。 1.用D3给文档添加元素。 首先要选择select（）这个标签元素，可用链式向标签里添加html节点appen
使用D3.js进行数据可视化
m0_73500130的博客
05-03 843
D3.js是一个流行的JavaScript数据可视化库，全称为Data-Driven Documents，即数据驱动文档。它以数据为核心，通过数据来驱动文档的展示和操作。D3.js提供了丰富的API和工具，使得开发者能够创建出各种交互式和动态的数据可视化效果。
数据可视化--D3.js入门（数据集与数据）
小芋儿的博客
08-14 2837
D3.js入门D3（Data-Driven Document）:数据驱动文档D3的优势：学习D3.js之间需要学习的：学习D3.js的网站：第一节：数据集与数据选择集：select()、selectAll()数据绑定：datum()、data()数组Array：映射Map：集合Set：嵌套结构Nest： D3（Data-Driven Document）:数据驱动文档 D3是一个JavaScript的数据库，是用来做数据可视化的。其中文档指的是DOM，即文档对象模型（Document Object Model
【D3.js数据可视化系列教程】--（一）简介
热门推荐
司机大傻
09-07 3万+
D3.js简介
D3.js 数据可视化
qq_095的博客
08-09 1万+
”一张图片价值于一千个字“ 第一课 简介和安装 D3是什么 全称是（Data-Driven Documents）,一个被数据驱动的文档 简单点，是一个JavaScript函数库，使用它主要用来做数据可视化。 D3 是一个开源项目，作者是纽约时报的工程师。 D3也叫D3.js： 提供了各种简单易用的函数，大大简化JS操作数据的难度，尤其在数据可视化方面，D3已将生成可视化的复杂步骤...
D3.js数据可视化实战手册.pdf
08-09
D3.js数据可视化实战手册.pdf
案例分析-Vue 结合 D3.js 进行数据可视化开发的练手案例.rar
最新发布
05-20
案例分析-Vue 结合 D3.js 进行数据可视化开发的练手案例 技术栈 Vue vue-router D3.js 4.0 Mockjs 安装 git clone https://github.com/funlee/vue-visualization.git cd vue-visualization npm install npm run dev...
基于D3.js的Historical-ranking-data-visualization-based：这是一个数据可视化项目，能够将历史数据排名转换为动态柱状图图表
02-05
这是一个数据可视化项目，基于D3.js。能够将历史数据排名转换为动态柱状图图表。 这个项目降低降低此类视频的使用门生物学与提高生产效率，从而没有编程经验的用户也能无痛制作排名可视化动画。 一句话用法 只需打开...
SiliconValleyCodeCamp-d3:D3.js数据可视化简介
05-05
D3.js数据可视化简介 2015年10月。 幻灯片： 。
d3js数据可视化实战
12-28
d3js数据可视化实战，d3实战详解教程
数据可视化d3.js编写
12-30
可视化d3.js编写地图重庆市网吧可视化分析，百度地图接口调用，折线图，饼图，散点图
D3js使用Web标准实现数据可视化的JavaScript库
08-10
D3.js：使用Web标准实现数据可视化的JavaScript库
D3js oracle,数据可视化D3.js
weixin_29364297的博客
04-10 74
一、简介和安装简介D3的全称是(Data-Driven Documents)，顾名思义可以知道是一个被数据驱动的文档。D3.js是一个基于数据处理文档的JavaScript库。D3帮助我们使用HTML，SVG和CSS将数据带入生活。D3强调网络标准，可以让您充分利用现代浏览器的功能，而无需将自己绑定到专有框架，将强大的可视化组件和数据驱动的方法结合到DOM操作中。安装使用将其文件解压之后，放置你...
数据可视化之_D3.js简介_svg_d3.selection API
蒲公英芽的博客
05-27 1677
前言 什么是数据可视化 将结果数据的每一个数据项，作为单个图元元素展示，大量的数据集构成数据图像，同时将数据的各个属性以多维度的方式展现，从而提高数据的可读性。 数据可视化的优点 图形化展示比文字的描述能力更强。 降低大数据据阅读门槛。 清晰有效地传达与沟通信息。 具体做法：是指将大型数据集中的数据以图形图像形式表示。基于几何的技术、面向像素技术、基于图标的技术、基于层次的技术、基于图像的技术和分布式技术等等。 数据处理流程 数据收集：将已经存在的数据管理起来（ 收集、采集 ）； 数据清洗 ETL (
数据可视化——D3.js学习笔记
Amber的博客
01-21 507
占位符
D3.js 可视化从入门到精通
weixin_44879611的博客
12-30 1430
【代码】D3.js 可视化从入门到精通。
d3.js数据可视化实战手册
12-24
《d3.js数据可视化实战手册》是一本介绍如何使用d3.js库进行数据可视化的实用指南。这本书很适合那些想要深入了解数据可视化技术并且对d3.js有一定了解的读者。 首先，本书详细介绍了d3.js的基本概念和原理，帮助读者建立起对这个库的全面认识。接着，书中从实际案例出发，演示了如何使用d3.js来创建各种类型的图表和可视化效果，包括柱状图、折线图、饼图、地图等。读者可以通过跟随书中的案例代码，逐步学习如何利用d3.js库来构建复杂的数据可视化应用。 此外，本书还介绍了d3.js的一些高级特性和技巧，让读者能够更好地利用这个库进行数据可视化的定制和优化。同时，作者还提供了一些实战经验和最佳实践，帮助读者避免一些常见的问题和错误，让他们能够更快地掌握d3.js的应用技巧。 总的来说，《d3.js数据可视化实战手册》是一本内容丰富、实用性强的书籍，对于想要深入学习数据可视化技术和提高d3.js应用水平的读者来说，是一本非常值得阅读的指南。通过学习这本书的内容，读者可以快速掌握d3.js的使用技巧，从而能够更加灵活地应用这个库来展示和分析各种类型的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值