zoukankan      html  css  js  c++  java
  • 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()

  • 相关阅读:
    〖Linux〗Kubuntu设置打开应用时就只在打开时的工作区显示
    〖Linux〗Kubuntu, the application 'Google Chrome' has requested to open the wallet 'kdewallet'解决方法
    unity, dll is not allowed to be included or could not be found
    android check box 自定义图片
    unity, ios skin crash
    unity, Collider2D.bounds的一个坑
    unity, ContentSizeFitter立即生效
    类里的通用成员函数应声明为static
    unity, Gizmos.DrawMesh一个坑
    直线切割凹多边形
  • 原文地址:https://www.cnblogs.com/magic-xxj/p/9186386.html
Copyright © 2011-2022 走看看