D3.js学习

// 1.选择
d3.select('p')
d3.selectAll('p')
d3.select('.txt').style('color', '#fff')
// 2.支持动态设置属性
// a:随机属性
d3.selectAll('p').style('color', function (d, i) {
    return 1 % 2 ? '#fff' : '#eee'
})
// b.将数组中的属性设置给元素
d3.selectAll('p')
    .data([4, 8, 15, 16, 23, 42])
    .style('font-size', function (d) {
        return d + 'px'
    });
// enter操作：添加DOM
d3.select('body')
    .selectAll('p')
    .data([4, 8, 15, 16, 23, 42])
    .enter()
    .append('p')
    .text(function (d) {
        return 'i am number' + d + '!'
    })
// 数据和元素一样
var p = d3.select('body')
    .selectAll('p')
    .data([4, 8, 15, 16, 23, 42])
    .text(function (d) {
        return d
    })
// exit操作：删除DOM
var p = d3.select('body')
    .selectAll('p')
    .data([4, 8, 15, 16, 23, 42])
    .text(function (d) {
        return d;
    })
p.exit().remove()
// 不确定数据多少的情况下，可以三种方法一起使用；
var p=select('body')
.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.text(function(d){return d;})
p.enter().append('p').text(function(d){return d;})
p.exit().remove()

// classed:设置元素的类class一个或者多个
// var p = d3.select('body').select('p').classed('test foo', true)
// attr:设置元素的属性，selection.attr(name[,value]),如果value是一个函数，参数为d和i
// var p = d3.select('body').selectAll('p').data('2').attr('title',function(d){return d;})
// selection.style(name,[,value[,priority]])设置元素的样式；
// selection.style({'stroke': 'black', 'stroke-width': 2})
// selection.property：可设置元素的属性，如checkbox的选中等；
// d3.select('.check').property('checked',true)
D3的布局：
　　一共有12种，这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的；

猜你喜欢