d3.js——选择集与数据绑定模板应用

最新推荐文章于 2023-07-11 16:05:54 发布

AryaoO

最新推荐文章于 2023-07-11 16:05:54 发布

阅读量895

点赞数

分类专栏：前端开发——D3 前端开发基础文章标签： update enter exit .push .sort

本文链接：https://blog.csdn.net/Selina_Chan/article/details/51382637

版权

前端开发基础同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

前端开发——D3

33 篇文章 4 订阅

订阅专栏

var dataset = [30,43,120,87,99,167,142]
var width = 500,
    height = 500;
var rectWidth = 30,
    rectStep= 35;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)

一、分别获取rect的update、enter、exit部分：

 //获取矩形的update部分
    var rectUpdate = svg.selectAll("rect")
        .data(dataset)
    //获取矩形的enter部分
    var rectEnter = rectUpdate.enter()
    //获取矩形的exit部分
    var rectExit = rectUpdate.exit()

二、分别对rect的update、enter、exit进行操作

 //rectUpdate处理
    rectUpdate.attr("fill","steelblue")
        .attr("x", function (d,i) {
            return i*rectStep
        })
        .attr("y",function(d){return height-d})
        .attr("width",rectWidth)
        .attr("height",function(d){return d})
    //rectEnter处理
    rectEnter.append("rect")
        .attr("fill","steelblue")
        .attr("x", function (d,i) {
            return i*rectStep;
        })
        .attr("y", function (d) {
            return height-d;
        })
        .attr("width",rectWidth)
        .attr("height",function(d){return d})
    //rectExit处理
rectExit.remove()

从上述的代码可以就很清楚地明白如何将其模板应用起来了。完整代码如下：

/**
 * Created by Silence_C on 2016/5/11.
 */
var dataset = [30,43,120,87,99,167,142]
var width = 500,
    height = 500;
var rectWidth = 30,
    rectStep= 35;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)

function draw(){
    //获取矩形的update部分
    var rectUpdate = svg.selectAll("rect")
        .data(dataset)
    //获取矩形的enter部分
    var rectEnter = rectUpdate.enter()
    //获取矩形的exit部分
    var rectExit = rectUpdate.exit()
    //rectUpdate处理
    rectUpdate.attr("fill","steelblue")
        .attr("x", function (d,i) {
            return i*rectStep
        })
        .attr("y",function(d){return height-d})
        .attr("width",rectWidth)
        .attr("height",function(d){return d})
    //rectEnter处理
    rectEnter.append("rect")
        .attr("fill","steelblue")
        .attr("x", function (d,i) {
            return i*rectStep;
        })
        .attr("y", function (d) {
            return height-d;
        })
        .attr("width",rectWidth)
        .attr("height",function(d){return d})
    //rectExit处理
rectExit.remove()
    //获取文字的update
    var textUpdate = svg.selectAll("text")
        .data(dataset)
    //获取文字enter部分
    var textEnter = textUpdate.enter()
    //获取文字的exit部分
    var textExit = textUpdate.exit()
    //textUpdate处理
    textUpdate.attr("fill","white")
        .attr("font-size","16px")
        .attr("text-anchor","middle")
        .attr("x",function(d,i){return i*rectStep})
        .attr("y",function(d){return height-d})
        .attr("dx",rectWidth/2)
        .attr("dy","1em")
        .text(function(d){
            return d
        })
    //textEnter处理
    textEnter.append("text")
        .attr("fill","white")
        .attr("font-size","14px")
        .attr("text-anchor","middle")
        .attr("x",function(d,i){return i*rectStep})
        .attr("y",function(d){return height-d})
        .attr("dx",rectWidth/2)
        .attr("dy","1em")
        .text(function(d){
            return d
        })
    //textExit处理
    textExit.remove();
}
draw()
function myadd(){
    dataset.push(Math.floor(Math.random()*100));
    draw()
}
function  mysort(){
    dataset.sort(d3.ascending)
    draw()
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>update\enter\exit的应用</title>
</head>
<body>
<script src="d3.js"></script>
<script src="js/datatrect.js"></script>
<br/>
       
<button type="button" οnclick="mysort()">   排序  </button>
<button type="button" οnclick="myadd()">   增加数据  </button>

</body>
</html>

运行结果如下：

AryaoO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
d3.js——选择集与数据绑定模板应用

var dataset = [30,43,120,87,99,167,142]var width = 500, height = 500;var rectWidth = 30, rectStep= 35;var svg = d3.select("body").append("svg").attr("width",width).attr("height",height)
复制链接

扫一扫