D3.js學習記錄

時間 2019-11-12

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>D3</title>
    
    <style>
    
    .chart div{
        background-color: #3498db;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
    }
    
    </style>
    
    <script src="/javascripts/d3js/d3.v3.js"></script>
    <script src="/javascripts/d3js/jsonData3.js"></script>
</head>
<body>
    
    
    <script>
    
    //create a data
    var data = [4, 8, 5, 2, 10, 20];
    
    //建立一個容器
    var chart = d3.select("body")
                    .append("div")
                    .attr("class", "chart");
    //向容器中添加幾個div元素
    chart.selectAll("div")
            .data(data)
            .enter()
            .append("div")
            .style("width", function(d){
                return d*10 + 'px';
            })
            .text(function(d){
                return d;
            })
    
    </script>
    
    
</body>
</html>

D3.js也是一個javascript框架，像jquery同樣，只不過他的特長是在數據可視化這一塊而已。因此不要以爲D3是多麼的複雜。在上面的代碼中咱們能夠看到D3的一些用法：javascript

　　選擇元素：d3.select(「element」)，這個就是jquery中的$()，只不過沒有采用簡寫的形式。html

　　建立並添加新元素到選定元素後：.append("element")，就是javascript中的append方法同樣，他返回的是一個添加了該新元素的元素集。java

　　設置或獲取指定屬性：.attr(name[, value])，同jquery中的attr()。jquery

D3.js採用的是像jquery中的鏈式方法，在執行一個操做後能夠繼續調用其餘的方法，可是，咱們須要注意的是，前一個方法的輸出類型必需要和下一個方法的輸入類型相匹配！json

　　選擇所選的元素中的多個子元素組成新的選擇集:selectAll("obj")，建立一個「空房子」--selection，這樣咱們能夠往裏面填充「傢俱」--數據。不過如今的選擇集尚未插入到文檔，由於咱們還要給這些空的選擇集加入數據是否是？app

　　設置或獲取一組元素的綁定數據：.data(dataset)，這樣「空房子」分配「傢俱」了，D3會根據數據來進行合理的分配，分配好了，這些傢俱下一步是否是該搬進這些小房子了呢？框架

　　返回一個新的、綁定了數據的元素：.enter()，這樣子咱們的以前建立的房子就可使用了。他們在DOM中有了本身的位置，咱們終於能夠往他身上進行操做了！ui

　　設置HTML屬性：.attr()spa

　　設置CSS樣式：.style()code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。