02-DataJoin

DataJoin介绍

使用函数来设置图元的属性

代码中添加一组data2，后面动态更新要用到

const data2 = [{name: 'Fu', value: 3}, {name: 'Lu', value: 11},
            {name: 'Cai', value: 7}, {name: 'Gou', value: 14},
            {name: 'Zha', value: 14}, {name: 'Rui', value: 10},
            {name: 'Wu', value: 9}, {name: 'He', value: 20},
            {name: 'Xiang', value: 8}, {name: 'Godness', value: 17},
            {name: 'Wei', value: 15}, {name: 'Chen', value: 14},
            {name: 'Yu', value: 15}, {name: 'Li', value: 18}, ];

总结

结合案例，代码如下

d3.selectAll('rect').data(data2).attr('width', d => xScale(d.value));

引入DataJoin

绑定数据的三个‘状态’

Enter

Enter用法介绍
Enter 给不需要数据绑定的图元提供一个占位符
使用Enter绘制代码如下

g.selectAll('.dataRect').data(data).enter().append('rect')
            .attr('class', 'dataRect')
            .attr('width', d => xScale(d.value))
            .attr('height', yScale.bandwidth())
            .attr('y', d => yScale(d.name))
            .attr('fill', 'green')
            .attr('opacity', 0.8);
其中'width' 和 'y' 的值是使用绑定的data设置

与之前的代码对比

data.forEach( d => {
            g.append('rect')
                .attr('width', xScale(d.value))
                .attr('height', yScale.bandwidth())
                .attr('fill', 'green')
                .attr('y', yScale(d.name))
        });

Update

Updata用法介绍

示例代码

d3.selectAll('rect').data(data2, d => d.name).transition().duration(1000).attr('width', d => xScale(d.value));

Exit

Exit介绍

Data-Join的简洁格式

Data-Join简洁格式介绍
快速实现一个效果，定制性较差
代码示例

d3.selectAll('rect').data(data1).join('rect').transition().duration(1000).attr('width', d => xScale(d.value));