码迷,mamicode.com
首页 > 其他好文 > 详细

D3——动态绑定数据

时间:2017-09-15 16:31:38      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:images   技术分享   ext   dataset   ack   元素   end   turn   count   

一、绑定数组元素

var dataset = [5, 10, 15, 20, 25 ];

d3.select("body")
    .selectAll("p")    
    .data(dataset)  
    .enter()
    .append("p")
    .text("New paragraph!");

技术分享

d3.select("body"):选择body

.selectAll("p"): 选择body中的所有p元素,此时还没有创建p元素, 因此this returns an empty selection.

.data(dataset): 统计并分析数据元素,dataset中有5个元素,因此之后的每步操作都重复执行5次

.enter():如果数据值的个数大于对应的DOM元素的个数,enter()将为没有对应DOM元素的值创建占位符

.append("p"):

.text("New paragraph!"):

.text(function(d) {return d;});

技术分享

.text(function(d) {
    return "I can count up to " + d;
});

技术分享

.style("color", "red");

技术分享

.style("color", function(d) {
    if (d > 15) {   //Threshold of 15
        return "red";
    } else {
        return "black";
    }
});

技术分享

D3——动态绑定数据

标签:images   技术分享   ext   dataset   ack   元素   end   turn   count   

原文地址:http://www.cnblogs.com/xuepei/p/7526769.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!