zoukankan      html  css  js  c++  java
  • d3.js(1)

    1. 添加元素语法:

    [selection].append("p");


    d3.select("body").append("p").text("New paragraph!");  


    • 选择body标签,为之添加一个p标签,并设置它的内容为New paragraph!
    d3.select("body").append("p").text("New paragraph!");
    

    2. 数据绑定:

    var dataset = [ 5, 10, 15, 20, 25 ];
    
        d3.select("body").selectAll("p")
        .data(dataset)
        .enter()
        .append("p")
        .text("New paragraph!");


    • 查找DOM中的body。
    d3.select("body")
    
    • 选择DOM中的所有段落。

    由于没有存在,这将返回一个空的选择。这个选择为空,代表段落很快就会存在。

    selectAll("p")
    
    • 计数和分析我们的数据值。

    有五个值,之后我们的数据集执行了5次,每个值一次。

    注意这里data函数会绑定数据,并能够使用D3经典的E-N-E编程套路(这个以后会讲到,暂时不用关心),而另外一个数据绑定函数datum则只是替换一组新的数据。

    data(dataset)
    
    • 绑定数据和DOM元素。

    这个方法将数据传递到DOM中。如果数据值比相应的DOM元素多,就用enter()创建一个新元素的占位符。

    enter()
    
    • 追加元素

    通过enter()创建的占位符 在DOM中插入一个p元素。

    append("p")
    
    • 设置元素的文本

    为新创建的p标签插入一个文本值。

    text("New paragraph!")

    3. 使用数据:

    var dataset = [ 5, 10, 15, 20, 25 ];
    
        d3.select("body").selectAll("p")
            .data(dataset)
            .enter()
            .append("p")
            .text(function(d) {
                return "I can count up to " + d;
            })
            .style("color", function(d) {
                if (d > 15) { //大于15的数字显示为红色
                    return "red";
                } else {
                    return "black";
                }
            });
    4.条形图源码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>testD3-3-drawingDivBar</title>
    <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script>
    <style type="text/css">
    div.bar {
        display: inline-block;
         20px;
        margin-right: 2px;
        background-color: teal;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    
        var dataset = [ 5, 10, 15, 20, 25 ];
    
        d3.select("body").selectAll("div")
            .data(dataset)
            .enter()
            .append("div")
            .attr("class", "bar")
            .style("height", function(d) {
                return (d * 5) + "px";
            });
    
    </script>
    </body>
    </html>

    参考:http://blog.csdn.net/zhang__tianxu/article/category/1623437/2

  • 相关阅读:
    Cooperate with Myself
    A brief introduction of myself
    计算1+11+111+1111+........
    Jav实现F(n)=F(n-1)+F(n-2)+.....+F(1)+1
    查找二维数组中是否有符合的目标值
    排序算法
    时间复杂度
    Java代码实现单例模式
    查找一个字符串中重复出现字符的个数
    null,“”,empty的区别
  • 原文地址:https://www.cnblogs.com/zhouwenbo/p/8205371.html
Copyright © 2011-2022 走看看