zoukankan      html  css  js  c++  java
  • [D3] Basic Interactivity with D3 v4

    Data visualizations are a lot more interesting when they’re interactive. Whether it’s clicks, roll overs, or drags, it makes things more compelling, and D3 is up to the task. This lesson demonstrates how to implement basic interactions and shows how D3 can do things vanilla CSS can’t.

    var scores = [
      { name: 'Alice', score: 96 },
      { name: 'Billy', score: 83 },
      { name: 'Cindy', score: 91 },
      { name: 'David', score: 96 },
      { name: 'Emily', score: 88 }
    ];
    
    const bars = d3.select('.chart')
        .append('svg')
            .attr('width', 300)
            .attr('height', 300)
            .style('background', 'white')
        .selectAll('g')
        .data(scores)
        .enter()
            .append('g')
            .attr('transform', (d, i) => 'translate(0, ' + i * 33 + ')');
    
    
    bars.append('rect')
        .attr('width', d => d.score)
        .attr('class', 'bar')
        .on('mouseover', function(d, i, elements) {
            // transform the hover item to scale 1.1
            d3.select(this).classed('barOn', true);
    
            // set not hover elements to opacity 0.8
            d3.selectAll(elements)
                .filter(':not(:hover)')
                .style('opacity', 0.6);
        })
        .on('mouseout', function(d, i, elements) {
            d3.select(this).classed('barOn', false);
            d3.selectAll(elements)
                .style('opacity', 1);
        });
    
    bars.append('text')
        .text(d => d.name)  
        .attr('y', 20)  
        
        

  • 相关阅读:
    PHP一维数组转二维数组正则表达式
    PHP IDE选择标准
    PHP导出MySQL数据字典 Summer-Mysql-Dic
    PHP导入导出csv文件 Summer-CSV
    laravel学习
    php markdown 接口文档生成工具 SummerDoc
    AIX系统日志
    inotify+rsync实现实时同步
    shell数组应用
    Nginx缓存功能、防盗链、URL重写
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7295460.html
Copyright © 2011-2022 走看看