1. 模板

[javascript]view plain copy
//绑定数据后，分别返回update、enter、exit部分  
var update = selection.data(dataset);  
var enter = update.enter();  
var exit = update.exit();  
  
//1.update部分的处理方法  
update.text( function(d){ return d; } );  
  
//2.enter部分的处理方法  
enter.append("p")  
    .text( function(d){ return d; } );  
  
//3.exit部分的处理方法  
exit.remove();  

2. 应用模板的场合

当数据需要更新（添加、删除、变更）的时候，要想起此模板。

3. 应该该模板的柱形图

下面制作一个柱形图，用于理解更新数据与使用该模板的好处。柱形图的数据有时候需要更新，更新后柱形图也需要跟着变化。例如将数据排序、增加新的数据等，都需要柱形图跟着变化。在这里只绘制柱形图的矩形和文字，不绘制坐标轴，然后再添加两个按钮，用于更新数据。将绘制图形的代码写在一个函数draw()里，当数据发生更新时，再次调用此函数即可。

[javascript]view plain copy
function draw(){  
    //获取矩形的update部分  
    var updateRect = svg.selectAll("rect")  
                    .data(dataset);  
      
    //获取矩形的enter部分  
    var enterRect = updateRect.enter();  
      
    //获取矩形的exit部分  
    var exitRect = updateRect.exit();  
      
    //1. 矩形的update部分的处理方法  
      
    //2. 矩形的enter部分的处理方法  
      
    //3. 矩形的exit部分的处理方法  
              
    //获取文字的update部分  
    var updateText = svg.selectAll("text")  
                    .data(dataset);  
      
    //获取文字的enter部分  
    var enterText = updateText.enter();  
      
    //获取文字的exit部分  
    var exitText = updateText.exit();  
      
    //1. 文字的update部分的处理方法  
      
    //2. 文字的enter部分的处理方法  
      
    //3. 文字的exit部分的处理方法  
}  

上述模板中，分别获取矩形和文字的update、enter、exit三个部分。然后再分别对三个部分进行相应的处理。下面以矩形为例，来讲解怎么样分别处理。代码如下：

[javascript]view plain copy
//1. 矩形的update部分的处理方法  
updateRect.attr("fill","steelblue")     //设置颜色为steelblue  
        .attr("x", function(d,i){       //设置矩形的x坐标  
            return padding.left + i * rectStep;  
        })  
        .attr("y", function(d){     //设置矩形的y坐标  
            return height- padding.bottom - d;  
        })  
        .attr("width",rectWidth)        //设置矩形的宽度  
        .attr("height",function(d){ //设置矩形的高度  
            return d;  
        });  
      
//2. 矩形的enter部分的处理方法  
enterRect.append("rect")  
        .attr("fill","steelblue")       //设置颜色为steelblue  
        .attr("x", function(d,i){       //设置矩形的x坐标  
            return padding.left + i * rectStep;  
        })  
        .attr("y", function(d){     //设置矩形的y坐标  
            return height- padding.bottom - d;  
        })  
        .attr("width",rectWidth)        //设置矩形的宽度  
        .attr("height",function(d){ //设置矩形的高度  
            return d;  
        });  
      
    //3. 矩形的exit部分的处理方法  
    exitRect.remove();  

update部分的处理方法是更新属性，enter部分的处理方法是添加元素后再赋予其相应的属性，exit部分的处理方法则是删除掉多余的元素。这么处理之后，对于原数组dataset，无论是排序还是增减数据，图表都能够自动发生相应变化。下面在HTML中分别添加两个按钮，一个用于排序，一个用于增加数据。在HTML中的里添加以下两个按钮：

[javascript]view plain copy
<button type="button">排序</button>  
<button type="button">增加数据</button>  

给两个按钮的定义了两个事件函数，但单击事件发生时，分别调用mysort()和myadd()。这两个函数的实现很简单，只要将数据处理后，再调用一次draw()重绘一次即可。

[javascript]view plain copy
function mysort(){  
    dataset.sort(d3.ascending); //排序  
    draw();  
}  
  
function myadd(){  
    dataset.push( Math.floor(Math.random() * 100) );    //添加一个项  
    draw();  
}  

由于边界有限，增加多个数据后矩形会在边界之外，但是不妨碍本文要表达的意思。

源代码可打开下面网址后，右键查看源代码：

http://www.ourd3js.com/demo/template.html

【 D3.js 选择集与数据详解 — 5 】处理模板的应用

1. 模板

2. 应用模板的场合

3. 应该该模板的柱形图

猜你喜欢

【 D3.js 选择集与数据详解 — 5 】 处理模板的应用

1. 模板

2. 应用模板的场合

3. 应该该模板的柱形图

猜你喜欢

【 D3.js 选择集与数据详解 — 5 】处理模板的应用