1. 程式人生 > >D3——動態綁定數據

D3——動態綁定數據

returns 數組元素 統計 selection .com () image sel 重復執行

一、綁定數組元素

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——動態綁定數據