【D3.js数据可视化系列教程】--（三）数据绑定

最新推荐文章于 2023-07-17 23:49:00 发布
最新推荐文章于 2023-07-17 23:49:00 发布
阅读量1.7w 收藏 10
点赞数 13
分类专栏： 数据可视化 D3数据可视化系列教程 文章标签： d3 d3.js d3js 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianxuzhang/article/details/11331289
版权

1. D3可以处理哪些类型的数据？

  • JS的数据类型。

    如数字，时间，字符串，布尔值，数组，对象等都可以。

  • D3自定义的数据类型。

    如集合（Set）,映射（Map）,嵌套（Nest）,及各种颜色空间（RGB，HSL，L*a*b，HSV）对象等

最常用的是数组，JSON。特殊的有CSV，GeoJSON数据等。

2. 如何绑定？

选择元素，绑定数据，追加元素。

<!DOCTYPE html>
<html>
<head>
<title>testD3-1.html</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script>
</head>

<body>
    This is my HTML page. <br>
</body>
<script type="text/javascript">
    var dataset = [ 5, 10, 15, 20, 25 ];

    d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");
</script>
</html>

3. 代码解释

  • 查找DOM中的body。
d3.select("body")
  • 选择DOM中的所有段落。

由于没有存在，这将返回一个空的选择。这个选择为空，代表段落很快就会存在。

selectAll("p")
  • 计数和分析我们的数据值。

有五个值，之后我们的数据集执行了5次，每个值一次。

注意这里data函数会绑定数据，并能够使用D3经典的E-N-E编程套路（这个以后会讲到，暂时不用关心），而另外一个数据绑定函数datum则只是替换一组新的数据。

data(dataset)
  • 绑定数据和DOM元素。

这个方法将数据传递到DOM中。如果数据值比相应的DOM元素多，就用enter()创建一个新元素的占位符。

enter()
  • 追加元素

通过enter()创建的占位符 在DOM中插入一个p元素。

append("p")
  • 设置元素的文本

为新创建的p标签插入一个文本值。

text("New paragraph!")

4. 效果

绑定数据添加元素


司机大傻
关注
  • 13
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
D3.js入门教程
10-30
近年来，可视化越来越流行，许多报刊杂志、门户网站、新闻媒体都大量使用可视化技术，使得复杂的数据和文 字变得十分容易理解，有一句谚语“一张图片价值于一千个字”，正是如此。D3 正是数据可视化工具中的佼佼 者，基于 JavaScript 开发，项目托管于 GitHub。从 D3 诞生以来，不断受到好评，在 GitHub 上的项目仓库排 行榜也不断上升。本教程的目的在于提供一个
十大案例，带你使用D3.js实现数据可视化
小秋博客
08-11 2万+
原文：Learn to Create D3.js Data Visualizations by Example 译者：kmokidd，UI 工程师。 责编：陈秋歌，CSDN内容运营，关注前端开发、用户体验技术领域。研发心得、项目实战、前沿技术、外文翻译……，只要是技术干货，十分欢迎投稿至chenqg#csdn.net。人人都是主编，这里就是你的舞台。 基于 D3.js ，编写 H...
【D3.js数据可视化系列教程】（十七）--通过键联结数据
司机大傻
11-02 7273
通过键联结数据
【D3.js数据可视化系列教程】（二十五）--加载csv文件
司机大傻
11-04 1万+
加载csv文件
D3.js数据可视化实战手册.pdf
08-09
D3.js数据可视化实战手册.pdf
D3.js 操作数据的常用API方法
weixin_57182748的博客
07-17 124
在画图表时，大部分时候后端回传的数据都是需要我们做进一步处理的（当然能搞定后端的人就随意啦), 这里介绍一些基本常用的API操作，其实大部分都是js中的Array操作的一些方式。D3 Number Formats 处理数字方法 ， 其实跟js中操作数据的差不多 大家可以参考下官网。D3 Time Formats 时间类别。d3.timeParse() 格式化日期。官方文件 官网查询对应的方法。
大数据可视化技术-echarts03（D3获取数据）
qq_45786520的博客
06-29 1293
使用D3绘制图形，主要分为以下几个步骤完成： 1、引入Echarts； 2、为ECharts准备一个具备大小的Dom； 3、加载数据和整理数据； 4、设定图表的配置项； 5、使用指定的配置项和数据显示图表； 6、添加和修改图表样式。 ...
【D3.js】基础教程
weixin_39085822的博客
01-12 1万+
D3: Data-Driven Documents D3 (或D3.js)是一个JavaScript库，用于使用Web标准可视化数据。 D3帮助您使用SVG，Canvas和HTML使数据栩栩如生。 D3将强大的可视化和交互技术与数据驱动的DOM操作方法相结合，为您提供现代浏览器的全部功能，并为您的数据设计正确的可视界面提供了自由。 官方资源 API Reference Release Notes Gallery Examples Wiki 安装D3 npm安装 安装命令npm install d3;
数据可视化：d3
m0_72410588的博客
05-13 1518
D3库是一个非常强大、灵活的数据可视化工具，可以帮助开发者快速、便捷地创建各种类型的数据可视化图表。本篇文章介绍了D3库的基本概念和使用方法，包括如何创建简单的图表、如何进行数据绑定和处理以及如何添加交互和动画效果等。希望读者能够通过本篇文章了解并掌握D3库的基础知识，从而更好地应用D3库进行数据可视化。
d3.js学习笔记vue2（8）更新数据
silent_missile的博客
06-10 3634
d3可以根据输入的数据来绘制各种图形，如果数据更新了呢？需要刷新图形，这个时候要注意，刷新图形和绘制图形是不同的。 绘制图形需要先绑定数据，然后根据数据的size确定要生成多少个svg节点，然后再根据节点去处理各个数据 d3.selectAll('path') .data(points) .enter() .append('path') .attr('d', (d) =&gt...
d3.js第七次人口普查可视化分析（含数据和源代码）
06-28
d3.js，将获取到的数据进行处理，将不同数据可视化成各种图形，折线图，饼状图，条形等，将各个年份的数据与图形对应起来分别是受教育情况、年龄组成、性别比例和户籍比例，并且将数据与图形相结合进行交互。
d3.js 数据可视化 JavaScript库
最新发布
04-16
“D3.js是一个JavaScript库，它... 在这里，读者将会学习到数据可视化的基本概念，JavaScript 的函数式编程，以及 D3的基础概念，例如元素选取、数据绑定、动画以及SVG生成。除此之外，读者还会领略到D3的一些高级特性.
D3.js数据可视化实战手册
07-13
介绍 如何搭建D3.js的开发环境， D3中的各种操作（数据映射、坐标轴组件、动画过度效果、制作地图、绘制图表、可视化交互、SVG 相关介绍等）。
D3.js-Data-Visualization-Projects:Packt发布的D3.js数据可视化项目的代码存储库
05-28
D3.js数据可视化项目[视频] 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的所有支持项目文件。 关于视频课程 如果您要创建沉浸式且有趣的数据可视化项目，那么D3.js是适合您的工具。 它简化了将任意...
【D3.js数据可视化实战】--（3）桑基图（sankey）的绘制
热门推荐
司机大傻
11-04 3万+
桑基图是流图（flow diagram）的一种，用来描述能量，人口，经济等的流动情况。 桑基图主要关注能量、物料或资本等在系统内部的流动和转移情况。起始流量和结束流量相同；在内部，不同的线条代表了不同的流量分流情况，它的宽度成比例地显示此分支占有的流量；节点不同的宽度代表了特定状态下的流量大小。
【D3.js数据可视化系列教程】--（一）简介
司机大傻
09-07 3万+
D3.js简介
【D3 API 中文手册】
司机大傻
07-26 3万+
D3 API 中文手册提交记录声明：本文仅供学习所用，未经作者允许严禁转载和演绎 《D3 API 中文手册》是D3官方API文档的中文翻译。始于2014-3-23日，基于VisualCrew小组的六次协作任务之上，目前已经大致翻译完毕，将陆续向官网提交D3 API 中文版。 本文主要内容有： 列举初版翻译/校对人员列表 记录中文翻译的官网提交情况 提供校对联系方式 提供D3
【D3.js数据可视化系列教程】--（二）最简单的开始：添加元素
司机大傻
09-07 1万+
添加元素
【D3.js数据可视化实战】--（1）绘制网格线
司机大傻
03-20 1万+
我们常常使用常规图表（直方图，折线图等）来表现数据。为了清楚的表示数据在数轴上的哪个数值区间，会直接在矩形和点上标注数值。除了这个办法外，还可以使用色调偏淡的网格作为背景参照。本文介绍了如何使用D3绘制网格线的小技巧： 绘制效果： 思路很简单：1 绘制SVG容器。2 给SVG分组，并设置分组的样式类。3 为分组分别添加横线和竖线。 关键技术介绍(1) 生成一个10元素的数组：(2) 定义x和y比例
d3.js 读取csv 画图
09-14
您可以使用d3.js来读取CSV文件并绘制图表。下面是一个基本的示例代码： 首先，确保您已将d3.js库添加到您的项目中。然后，创建一个HTML文件，并在文件中添加以下代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3.js CSV绘图示例</title> <script src="https://d3js.org/d3.v7.min.js"></script> </head> <body> <div id="chart"></div> <script> // 读取CSV文件 d3.csv("data.csv").then(function(data) { // 数据预处理 data.forEach(function(d) { d.value = +d.value; // 将数值字段转换为数字类型 }); // 创建画布 var svg = d3.select("#chart") .append("svg") .attr("width", 400) .attr("height", 300); // 创建柱状图 svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", function(d, i) { return i * 40; }) .attr("y", function(d) { return 300 - d.value; }) .attr("width", 30) .attr("height", function(d) { return d.value; }) .attr("fill", "steelblue"); }); </script> </body> </html> ``` 在上面的示例中，我们使用`d3.csv()`方法读取名为"data.csv"的CSV文件。然后，我们对数据进行了预处理，将"value"字段转换为数字类型。 接下来，我们创建了一个带有id为"chart"的<div>元素，并在其中创建一个<svg>元素作为画布。然后，我们使用`selectAll()`和`data()`方法绑定数据，并使用`enter()`和`append()`方法创建矩形元素来表示每个数据点的柱状图。最后，我们设置了矩形的位置、宽度、高度和填充颜色。 您可以根据需要调整代码以满足您的需求，并根据实际情况修改CSV文件的路径和数据字段。希望这可以帮助到您！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值