zoukankan      html  css  js  c++  java
  • [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 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');

  • 相关阅读:
    Spring框架:第八章:声明式事务
    Spring框架:第七章:AOP切面编程
    Spring框架:第六章:注解功能
    Jmeter之WebService接口测试
    Jmeter中的参数化常用的几种方式
    Jmeter之定时器
    Jmeter之断言——检查点
    Jmeter重要组件介绍(一)
    Jmeter中之各种乱码问题解决方案
    Jmeter之https请求
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7281834.html
Copyright © 2011-2022 走看看