D3 —— 基础知识与入门 #10

Heqingsong · 2019-08-16T14:00:20Z

选择元素

    // 选择一个元素
    d3.select('body');
    d3.select('#main');
    d3.select('.list'); // 注意只能选择类为.list 的第一个

    // 选择多个元素
    d3.selectAll('p');
    d3.selectAll('ul li');

    // dom api 的方式
    var dom = document.getElementById('main');
    d3.select(dom);

    var doms = document.querySelectorAll('ul li');
    d3.selectAll(doms);

    // 链式调用
    d3.select(dom).selectAll(doms);

添加、插入、删除元素

    <body>
        <ul>
            <li>f</li>
            <li>c</li>
            <li>Chengdu</li>
        </ul>
        <script>
            // 添加一个元素
            d3.select('ul').append('li').text('suix');

            // 在指定元素之前插入一个元素
            d3.select('ul').insert('li', 'ul li:nth-child(2)').text('c');

            // 删除一个元素
            d3.select('ul li:last-child').remove();
        </script>
    </body>

选择集

select 和 selectAll 返回的对象称为 选择集

    <p id="suix"> suix </p>
    <p> misheng </p>

    <script>
        var home = d3.selectAll('p');
        console.log(home.empty()); // false 判断选择集是否为空
        console.log(home.node()); // <p> suix </p> 返回第一个非空元素，为空就返回 null 
        console.log(home.size()); // 3 返回选择集中的元素个数
    </script>

常用方法

    // 获取属性
    d3.select('#suix').attr('title');

    // 设置属性
    d3.select('#suix').attr('title', 'suix')
    d3.select('#suix').attr({
        'title': 'suix',
        'name': '青松'
    })

    // 这样添加class 
    d3.select('#suix').attr('class', 'shuai handsome');
    
    // 也可以这样
    d3.select('#suix').classed({
        'shuai': false, // 不开启 shuai 这个类
        'handsome': true // 开启 handsome 
    });

    // 样式设置
    d3.select('#suix')
        .attr('class', 'handsome')
        .style({
            'color': 'blue',
            'font-size': '25px'
        });

    // 获取input中输入的内容
    d3.select('#input').property('value');
    
    // 设置input中输入的内容
    d3.select('#input').property('value', '轻松学D3');

    // 获取文本
    d3.select('#suix').text();

    // 获取html
    d3.select('body').html();

    // 将选择集自身作为参数传递给函数
    d3.selectAll('p').call(test);
    // 等同与
    function test(select){
        select.attr('name', 'home');
    }
    test(d3.selectAll('p'));

    // 排序
    var numbers = [5,8,2,7,6];
    // 递增
    numbers.sort(d3.ascending);
    // 递减
    numbers.sort(d3.descending);

    // 最小值
    d3.min(numbers);

    // 最大值
    d3.max(numbers);

    // [最小值,最大值]
    d3.extend(numbers);

    // 求和 如果数组为空 返回 0
    d3.sum(numbers);

    // 求平均值 如果数组为空 返回 undefined
    d3.mean(numbers);

    // 生成等差数 [start, stop, step]
    d3.range(2, 10, 2); // [2, 4, 6, 8]

    // 随机排列数组
    d3.shuffle(numbers);

    // 合并数组
    d3.merge([[1, 2], [3, 4]]); // [1,2,3,4]

    // 数据映射
    var datas = [
        {id: 1, name: 'f'},
        {id: 2, name: 'c'},
        {id: 3, name: 'c'},
    ];

    // 用datas构建映射，用id作为键
    var map = d3.map(datas, function(d){
        return d.id;
    });

    // 判断指定的key 是否存在
    map.has(1); // true

    // 返回指定 key 的value
    map.get(1); // {id: 1, name: "f"}

    // 设置内容
    map.set(4, {id: 4, name: 'Chengdu'});

    // 删除映射
    map.remove(4);

    // 返回所有的key
    map.keys();

    // 返回所有的value
    map.values();

    // 返回所有的key 和 value 
    map.entries();

    // 判断映射是否为空
    map.empty();

    // 返回映射的大小
    map.size();

    // 已数组形式返回映射
    map.forEach(function(k, v){}); // 3.x 版本
    map.each(function(k, v){}); // 4.x 版本

数据绑定

为选择集中每一个元素都绑定相同的数据值

    
    // 在被绑定了数据的选择集中添加元素后，新元素会继承该数据
    d3.selectAll('li').datum('fcc');
    
    /*
        [
            [
                {
                    "__data__": "fcc"
                },
                {
                    "__data__": "fcc"
                },
                {
                    "__data__": "fcc"
                }
            ]
        ]
    */

为选择集中每一个元素分别绑定数组的每一项值

    d3.selectAll('li').data([3,5])

    /*
        [
            [
                {
                    "__data__": 3
                },
                {
                    "__data__": 5
                }
            ]
        ]
    */

什么是 update、enter、exit ？

Update 已经存在的元素, Enter“丢失”的元素, Exit多余的元素

update、enter(绑定数据数量 > 对应元素)

    <body>
        <ul>
            <li>update</li> <!-- 3 -->
            <li>update</li> <!-- 6 -->
            <li>update</li> <!-- 9 -->
 <!-- 没有绑定上的dom元素就是 enter 12 -->
 <!-- 没有绑定上的dom元素就是 enter 15 -->
        </ul>
        <script>
            var datas = [ 3 , 6 , 9 , 12 , 15 ];

            var li = d3.select("ul").selectAll("li");

            //获取update部分
            var update = li.data(datas);

            //获取enter部分
            var enter = update.enter();

        </script>
    </dody>

update、exit(绑定数据数量 < 对应元素)

    <body>
        <ul>
            <li>update</li> <!-- 3 -->
            <li>update</li> <!-- 6 -->
            <li></li> <!-- 没有数据绑定的就是 exit -->
        </ul>
        <script>
            var datas = [ 3 , 6];

            var li = d3.select("ul").selectAll("li");

            //获取update部分
            var update = li.data(datas);

            //获取exit部分
            var exit = update.exit();

            // 移除多余元素
            exit.remove();
        </script>
    </dody>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

D3 —— 基础知识与入门 #10

D3 —— 基础知识与入门 #10

Heqingsong commented Aug 16, 2019

D3 —— 基础知识与入门 #10

D3 —— 基础知识与入门 #10

Comments

Heqingsong commented Aug 16, 2019

选择元素

添加、插入、删除元素

选择集

常用方法

数据绑定

为选择集中每一个元素都绑定相同的数据值

为选择集中每一个元素分别绑定数组的每一项值

什么是 update、enter、exit ？

update、enter(绑定数据数量 > 对应元素)

update、exit(绑定数据数量 < 对应元素)