【d3.js 学习---01】理解 append() exit() enter()

最新推荐文章于 2024-07-12 14:49:11 发布

木瓜~

最新推荐文章于 2024-07-12 14:49:11 发布

阅读量2k

点赞数 1

分类专栏： d3运用之道 d3-js-入门学习文章标签： d3.js enter exit append d3-学习

本文链接：https://blog.csdn.net/corner2030/article/details/52451904

版权

d3运用之道同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

d3-js-入门学习

3 篇文章 0 订阅

订阅专栏

最近由于项目的原因，需要接触d3，所以花些时间学习，也不知道该如何做笔记，看到很多大人物都写博客，于是也把自己平时学习d3的心得记在这里。哈哈！

1：enter().append()
当对应的元素不足时（输入数据数量 > 对应元素），原来的元素保留，多的数据要添加元素，使之与输入数据的数量相等，后面通常先跟 append 操作

如果body是这样的代码段
<body>
    <p>Hello!</p>
</body>

然后这样更新js代码：
d3.select("body")
    .selectAll("p")
    .data([4, 8, 15, 16, 23])
    .enter()
    .append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

会生成这样的结果：
Hello!
I’m number 8!
I’m number 15!
I’m number 16!
I’m number 23!

注意：这里4为什么没有替换Hello呢？

2: 修改元素（可以理解为update()）
当对应的元素正好满足时（输入数据数量 = 对应元素），实际上并不存在这样一个函数。但对应元素正好满足时，直接操作即可，后面直接跟 text ，style 等操作即可。

var p = d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23])
.text(function(d) { return d;})

 显示结果：
4
8
15
16
23

3：当原来对应的元素过多时（输入数据数量 < 对应元素），”操作的是多余的元素”
当对应的元素过多时，通常要删除元素，使之与绑定数据的数量相等，后面就要跟 remove 操作。会把多余输入数据数量的其它元素全部删掉，如下：

var pp = d3.select("body")
    .selectAll("p")
    .data([3, 1])

pp.exit()
    .text(function (d) {return "exit" + d;})

显示结果：
4
8
exit15
exit16
exit23

所以如果要删除后面的元素，可以用：

pp.exit().remove();

显示结果则会为：
4
8

========================
One example

输入数据是这样：
var indata =[{day:"2016/08/27",mmdd:"08/27",result:"PASS",rollback:"-",stage:"-",weekday:"6"},{day:"2016/08/28",mmdd:"08/28",result:"FAIL",rollback:"-",stage:"-",weekday:"7"}]

updateDay(indata)

function updateDay(indata){
    var labday = svg.selectAll("g.labday")
        .data(indata);

    var labdayEnter = labday.enter().append("g")

    labdayEnter.append("text")
        .text(function(d) { return d.mmdd; })
        .style("fill",function(d){return d.weekday==7||d.weekday==6?'#FF7640':'#333'})
        .attr("dx", function(d){return -this.getComputedTextLength()/2;})
        .attr("transform", "rotate(-90)");//字体旋转90度

    labday.transition().duration(duration)
    .attr("transform",function(d,i){return "translate(" + x(i) + ",0)";});

    //used for second time change day information
    var selLabday = svg.selectAll(".labday text")
        .data(indata)
        .text(function(d) {return d.mmdd;})
        .style("fill",function(d){return d.weekday==7||d.weekday==6?'#FF7640':'#333'});
    labday.exit().remove();
}