[D3] Start Visualizing Data Driven Documents with D3 v4
2017-08-03 20:55
585 查看
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 elements return 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');
相关文章推荐
- [D3] Load and Inspect Data with D3 v4
- [D3] Convert Input Data to Output Values with Linear Scales in D3
- Data driven test automation with Excel
- Foundation Flex for Developers: Data-Driven Applications with PHP, ASP.NET, ColdFusion, and FDS
- coursera-Capstone: Retrieving, Processing, and Visualizing Data with Python(Page Rank的作业)
- Data must start with zero
- [D3] Create Labels from Numeric Data with Quantize Scales in D3 v4
- [Ant][StartWithAnt] 第六章 数据类型Data Type
- Visualizing data with Elasticsearch, Logstash and Kibana
- Build Data-Driven Web Services with Updated XML Support for SQL Server 2000
- [D3] Create Labels from Non-numeric Data with Ordinal Scales in D3 v4
- Automating the Creation of Data-Rich Business Documents with Word 2007 and Visual Basic 2005
- [RxJS] Reactive Programming - Clear data while loading with RxJS startWith()
- [RxJS] Displaying Initial Data with StartWith
- Advanced Load Testing Scenarios with JMeter: Part 2 - Data-Driven Testing and Assertions
- RSA解密时javax.crypto.BadPaddingException: Data must start with zero
- Visualizing Chess Data With ggplot
- Data-Driven Services with Silverlight 2
- [D3] Build an Area Chart with D3 v4
- 利用java api 实现 RSA算法 解决(javax.crypto.BadPaddingException: Data must start with zero)