[D3] Start Visualizing Data Driven Documents with D3 v4

It’s time to live up to D3’s true name and potential by integrating some real data into your visualization. This lesson introduces the fundamental concepts of enter, update, and exit selections, topics essential for being successful with D3.

var scores = [{ name: 'Alice', score: 96 },{ name: 'Billy', score: 83 },{ name: 'Cindy', score: 91 },{ name: 'David', score: 96 },{ name: 'Emily', score: 88 }
];// There are three selection:
// enter: which in the data, but not yet on the page
// upate: which in the data, and also in the page
// exit: which not in the data, but exist on the page// update function handle those elements which already on the page
var update = d3.select('.chart').selectAll('div').data(scores, function(d) {// A compare function which checks whether there are existing elementsreturn d ? d.name : this.innerText;}).style('color', 'blue');var enter = update.enter().append('div').text(function(d) {return d.name;}).style('color', 'green');update.exit().style('width', '1px').style('height', '50px').style('background', 'white').style('border', '1px solid black'); // You can merge selection by using .merge() function
update.merge(enter).style('width', d => d.score + 'px').style('height', '50px').style('background', 'lightgreen').style('border', '1px solid black');

转载于:https://www.cnblogs.com/Answer1215/p/7281834.html

[D3] Start Visualizing Data Driven Documents with D3 v4相关推荐

大三小学期进阶课程第二十一课：reinforcement learning and data driven approaches
第21课.reinforcement learning and data driven approaches 解决规划问题,不能一上来就开始data driven,而是一步步来从rule based这 ...
【D3.js 学习总结】26、D3地理地图
d3.geo 在学习D3如何制作地图前,我们需要了解下地图的数据格式geoJSON,GeoJSON是一种对各种地理数据结构进行编码的格式,基于Javascript对象表示法的地理空间信息数据交换格式. ...
d3.js折线图_学习使用D3.js创建折线图
d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...
【D3.js 学习总结】12、D3布局-集群图
d3.layout.cluster() 集群图是一种用于表示包含与被包含关系的图表. 集群图(Cluster)的API说明 cluster.children - 取得或者设置子节点的访问器函数. cl ...
d3.js实现股权穿透图(vue+d3.js)
d3.js实现股权穿透图业务需求 1.实现的效果图 2.安装依赖 3.全部代码(复制粘贴即可实现) 参考git地址业务需求前段时间写过一篇使用relation-graph插件实现的股权穿透图效果 ...
d3设置line长度_1.7 SVG/D3中字体特殊设置
#### 1.添加上下标 SVG或D3中,有时需要实现如下的效果:10^23,或需要下标,使用`baseline-shift`属性即可实现. `baseline-shift`属性有两个值: * sub ...
[论文笔记]Trajectory Data Driven V2V/V2I Mode Switching and Bandwidth Allocation for Vehicle Networks
车辆的高机动性给车辆网络中高效可靠的通信带来挑战,其中的关键是如何实时处理大量的信道反馈信息以及如何更好地进行资源分配.本文提出一种利用轨迹数据的资源分配方法,其特点为减少CSI信息的反馈量并使V2V ...
开启D3：是什么让程序员与设计师如此钟爱
摘要: D3是一个开源的JavaScript程序库.它对设计师来说很友好,因为它能让设计师使用SVG这种常见的图形格式进行创作.它对程序员来说也很合适,因为它是兼容Web标准的.下面让我们开启D3,聊 ...
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上
引言元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...

[D3] Start Visualizing Data Driven Documents with D3 v4

[D3] Start Visualizing Data Driven Documents with D3 v4相关推荐

最新文章

热门文章