D3.js学习记录

<!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的一些用法：

　　选择元素：d3.select(“element”)，这个就是jquery中的$()，只不过没有采用简写的形式。

　　创建并添加新元素到选定元素后：.append("element")，就是javascript中的append方法一样，他返回的是一个添加了该新元素的元素集。

　　设置或获取指定属性：.attr(name[, value])，同jquery中的attr()。

D3.js采用的是像jquery中的链式方法，在执行一个操作后可以继续调用其他的方法，但是，我们需要注意的是，前一个方法的输出类型必须要和下一个方法的输入类型相匹配！

　　选择所选的元素中的多个子元素组成新的选择集:selectAll("obj")，创建一个“空房子”--selection，这样我们可以往里面填充“家具”--数据。不过现在的选择集还没有插入到文档，因为我们还要给这些空的选择集加入数据是不是？

　　设置或获取一组元素的绑定数据：.data(dataset)，这样“空房子”分配“家具”了，D3会根据数据来进行合理的分配，分配好了，这些家具下一步是不是该搬进这些小房子了呢？

　　返回一个新的、绑定了数据的元素：.enter()，这样子我们的之前创建的房子就可以使用了。他们在DOM中有了自己的位置，我们终于可以往他身上进行操作了！

　　设置HTML属性：.attr()

　　设置CSS样式：.style()

猜你喜欢