[D3] Basic Interactivity with D3 v4

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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)  
    
    

 

 

以上是关于[D3] Basic Interactivity with D3 v4的主要内容,如果未能解决你的问题,请参考以下文章