d3:data and datum

最新推荐文章于 2020-12-20 12:02:32 发布
最新推荐文章于 2020-12-20 12:02:32 发布
阅读量429 收藏
点赞数
分类专栏： D3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a197p/article/details/79044890
版权

datum是在一项元素后面添加，把所有数据添加到一项元素中。

data则是运用data enter exit3个函数去捆绑数据



BEconfidence
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3地图：d3地图
02-13
.datum(function(d) { return {id: d.id, value: data[d.id]}; }) .style("fill", function(d) { return color(d.value); }); ``` ### 7. 提供自定义数据 将自定义数据与地图区域关联起来，可以显示更丰富的信息...
D3 datum&data
Claroja
04-09 2143
data()与datum() 在选择元素后(selcetAll)后,直接调用.data方法绑定数据. data绑定的是数组常用 datum绑定的是一个数,不常用 在连缀方法中，只要调用 data() 了，就可以随时创建一个接收 d 为输入的匿名函数。与当前元素对应，方法 data() 确保了每个 d 都会被赋予原始数据集中的一个值。 随着 D3 遍历每个元素，“当前元素”的这个值也会跟着...
【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
weixin_30539835的博客
01-12 283
选择集和数据的关系是 D3 最重要的基础，在【入门 - 第 7 章】时进行过些许讲解，对于要掌握好 D3 是远远不够的。故此开设一个新的分类，专门讨论选择集与数据的关系，包括数据绑定的使用和工作原理，update 、enter、exit 的原理和使用方法等，接下来一段时间里会有多篇此类文章。D3 最大的特色就是能够将数据绑定到DOM上。使用select或selectAll选择元素之后，被选择的...
可视化工具D3教程
热门推荐
Blog | Laulliam
06-27 6万+
可视化工具D3教程第1章 D3简介第2章 第一个程序 Hello World第3章 正式进入D3的世界第4章 选择、插入、删除元素第5章 做一个简单的图表第6章 比例尺的使用第7章 坐标轴第8章 完整的柱形图第9章 让图表动起来第10章 理解 update()、enter()、exit()第11章 交互式操作第12章 布局第13章 饼状图第14章 力导向图第15章 树状图第16章 地图可视化学习D......
data单复数一样吗_data和datum谁是单数形式，谁是复数形式？
weixin_39889642的博客
12-20 6566
首先，datum 是单数， data是datum的复数形式。(类似 medium 和 media)其次，datum很少被用到了，现在大家往往用data。data是个单数不可数词语。类似sand 和water。以下说明data为什么是单数。在英语学界，关于data是单数还是复数本来就有很多的争议。有些人说data就是复数，而datum是data的单数形式。理由是，像英语中很多词一样，data是从拉丁...
d3选择集合核心方法 二 data与datum
qq_44884577的博客
04-20 868
d3选择集合核心方法 二 data与datum
SiliconValleyCodeCamp-d3:D3.js数据可视化简介
05-05
D3.js（Data-Driven Documents）是一种强大的JavaScript库，专为创建数据驱动的Web可视化而设计。由Mike Bostock开发，它允许开发者利用SVG、Canvas或HTML来直接操作DOM（Document Object Model），并结合数据进行...
d3-canvas:d3.js 的画布渲染助手
06-12
d3.js 画布 用于渲染到 HTML5 画布的 d3.js 插件。 用法 D3 是关于将数据绑定到元素。... datum ( data ) . attr ( 'd' , line ) ; // using d3.canvas line = d3 . canvas . line ( ) ; d3 . select ( 'canvas' )
d3-charts:使用D3在图表上进行实验
05-06
d3-图表 使用D3在图表上进行实验。 。 用法 所有图表都在src文件夹中。... // Initialise chart object and call from selection ... // Or change data in selection and then redraw d3 . select
d3-star-plot:d3 中的星图
06-30
.labels([ 'Body', 'Sweetness', 'Smokey' ])data.forEach(function(d) { d3.select(body).append('svg') .datum(d) .call(star)});例子在本地运行包含的示例： $ npm install$ grunt在浏览器中打开 。下载应用
d3选择集合核心方法(二)：data与datum
甘焕的博客
07-19 7788
比较d3js数据操作两个方法data与datum的差异。
d3选择集合核心方法(一)：data、enter、exit
甘焕的博客
07-30 2623
d3的全称是数据驱动文档，核心是将DOM文档的操作转换为对数据集合的操作，把开发人员的聚焦从DOM文档转移到数据集合上，大大简化了DOM文档与数据集合之间的联动操作，所以理解d3的集合操作就是学习d3的关键。 本文提供了一种快速理解与记忆d3数据集合操作的方法，并提供了代码示例助于理解。
d3.js——选择集与数据的绑定
Selina_Chan的博客
05-11 2880
一、使用datum（）绑定数据 Fire Water Wind var p = d3.select("body").selectAll("p"); p.datum("Thunder") //绑定字符串Thunder到选择集上 .text(f
深入学习D3JS：d3-color
Dosth_Magic
04-10 3482
d3color对颜色进行操作，比如 根据名字设置颜色，steelblue var c = d3.color("steelblue"); // {r: 70, g: 130, b: 180, opacity: 1} 转化为hsl格式 var c = d3.hsl("steelblue"); // {h: 207.27…, s: 0.44, l: 0.4902…, opacity: 1} ...
D3treemap布局
Dosth_Magic
12-16 2305
form{ font-family:"Helvetica Neue",Arical, sans-serif; } svg{ font: 10px sans-serif; } var svg=d3.select("svg"); var width=1200,height=600; var data={ "name":"gen", "children":[ { "name":"
深入学习D3JS：d3-array Statistics部分 d3.min, d3.max,d3.extent,d3.sum,d3.scan,d3.ascending,d3.deviation
Dosth_Magic
04-05 2084
本着学习d3js的原则，对函数用法做出解释，对源码写出自己的理解，文章最后补充一些源码中用到的JS语法，欢迎各位批评指正，学习交流！多多评论共同进步！ d3.min(iterable[,accessor]) 根据顺序返回可迭代对象中的最小值，如果没有可以比较的值，返回undefined. 可选访问函数等价于调用Array.from(Array.from用法，将类似于数组的对象转化为数组，要求该...
深入学习d3.js：d3-dispatch
Dosth_Magic
04-10 1901
这是d3设置的一种调度机制，类似于node里的eventEmitter。 例如，要为开始和结束时间创建调度。 var dispatch = d3.dispatch("start", "end"); 然后用on来注册回调函数。 dispatch.on("start", callback1); dispatch.on("start.foo", callback2); dispatch.on...
深入学习d3.js：d3-ease
Dosth_Magic
04-13 1638
ease是扭曲时间控制动画中运动的方法，常用与淡入淡出，使动画过度更平滑。 ease方法实现中，输入一个标准时间t，返回一个ease化的时间，他们的范围都在0，1内，表示动画的开始和结束。 ease(t) 首先设置你的ease，然后在动画期间调用。 // Before the animation starts, create your easing function. var custo...
深入学习D3JS: d3-path
Dosth_Magic
04-10 1433
function drawCircle(context, radius) { context.moveTo(radius, 0); context.arc(0, 0, radius, 0, 2 * Math.PI); } 使用canvas画图你需要上面的代码，d3.path可以让你在svg上使用类似代码画图。 var context = d3.path(); drawCircle(...
file:/D:/WebStorm/Project/test/Data/population-and-demography.csv根据这个文件用d3.js实现2019年的世界人口折线图
最新发布
05-11
好的，首先你需要在 HTML 文件中引入 D3.js 的库文件，可以通过以下方式实现： ```html <script src="https://d3js.org/d3.v5.min.js"></script> ``` 接下来，你需要在 HTML 文件中创建一个 SVG 元素，用于绘制图形。你可以通过以下方式实现： ```html <svg id="chart"></svg> ``` 接着，你可以使用 JavaScript 代码来读取 CSV 文件并生成折线图。以下是示例代码： ```js // 设置 SVG 元素的宽度和高度 var svgWidth = 800, svgHeight = 500; // 设置图表的边距 var margin = { top: 20, right: 20, bottom: 30, left: 50 }, width = svgWidth - margin.left - margin.right, height = svgHeight - margin.top - margin.bottom; // 创建 SVG 元素 var svg = d3.select('#chart') .attr("width", svgWidth) .attr("height", svgHeight); // 创建一个 g 元素，并将其移动到合适的位置 var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 定义 x 轴和 y 轴的比例尺 var x = d3.scaleLinear().range([0, width]); var y = d3.scaleLinear().range([height, 0]); // 定义 x 轴和 y 轴 var xAxis = d3.axisBottom().scale(x); var yAxis = d3.axisLeft().scale(y); // 读取 CSV 文件并生成折线图 d3.csv("population-and-demography.csv").then(function(data) { // 将字符串类型的数据转换为数值类型 data.forEach(function(d) { d.year = +d.year; d.population = +d.population; }); // 设置 x 轴和 y 轴的域范围 x.domain(d3.extent(data, function(d) { return d.year; })); y.domain([0, d3.max(data, function(d) { return d.population; })]); // 添加 x 轴 g.append("g") .attr("transform", "translate(0," + height + ")") .call(xAxis); // 添加 y 轴 g.append("g") .call(yAxis) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("Population"); // 添加折线 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", d3.line() .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.population); }) ); }); ``` 以上代码中，我们使用 `d3.csv()` 函数读取 CSV 文件并生成折线图。在读取 CSV 文件时，我们将字符串类型的数据转换为数值类型。然后，我们使用 `d3.extent()` 函数计算 x 轴的域范围，并使用 `d3.max()` 函数计算 y 轴的域范围。接着，我们使用 `d3.axisBottom()` 和 `d3.axisLeft()` 函数定义 x 轴和 y 轴，并使用 `d3.scaleLinear()` 函数定义 x 轴和 y 轴的比例尺。最后，我们使用 `d3.line()` 函数定义折线的路径，并使用 `d3.select()` 和 `d3.append()` 函数将 SVG 元素添加到 HTML 文件中。 你需要将以上代码保存到一个 JavaScript 文件中，并在 HTML 文件中引入该 JavaScript 文件，即可生成折线图。请注意，你需要将 CSV 文件保存到正确的路径，并且 CSV 文件中的数据需要符合代码中的格式要求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值