zoukankan      html  css  js  c++  java
  • 【 D3.js 入门系列 --- 2.1 】 关于怎样选择,插入,删除元素

     本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/

    转载请注明出处,谢谢。


    在D3.js中,选择元素的函数有两个:select 和 selectAll 。

    先说明一下它们的差别:

    • select 是选择所有指定元素的第一个
    • selectAll 是选择指定元素的所有(以用于后面同一时候操作)

    来看一个详细的样例,现有例如以下代码:

    <html>  
      <head>  
            <meta charset="utf-8">  
            <title>select,append,exit</title>  
      </head> 
    </style>
        <body>  
    	<h1>This is a cat.</h1>
    	<h1>That is a dog.</h1>
    	<h1>I like cat.</h1>
    		
    	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
            <script>
    		
            </script>  
      
        </body>  
    </html>  
    熟悉HTML的朋友一定会知道上面的代码输出什么,是三行h1大小的标题。

    假设要完毕两种选择任务:选择第一个h1 和 同一时候选择三个h1 。

    代码例如以下:

    var body = d3.select("body");           //选择body(第一个body,当然也仅仅有一个body)
    var h1 = body.select("h1");             //选择第一个h1
    var all_h1 = body.selectAll("h1");      //选择全部的h1
    为了证明上面的变量h1选择的是第一个h1,all_h1选择的是全部的h1,我们加上代码:

    h1.style("color","red");
    给h1变量选中的元素上色,加上这一句,会发现结果为:

    如此。我们能够证明我们选中的是第一个元素。

    假设换上代码:

    all_h1.style("color","blue");

    会发现三行文字都变成了蓝色。

    那么假设想选择第二个h1呢?正如上一节所说的,有两种方法。要么给h1加id。要么用function的形式,具体见上一节。


    接下来在body里新插入一个h1。

    var new_h1 = body.append("h1");
    new_h1.text("Append new h1");
    这里表示在body里新插入一个h1标签,插入之后返回新插入的元素,再设定文字为Append new h1。

    删除一个元素时,对于选择的元素使用remove。如:

    new_h1.remove();
    这是删除new_h1变量中选择的元素。


  • 相关阅读:
    poi 导出文件
    获取哪一年 周一的所有日期
    线程池配置
    mybatis基于唯一索引插入或更新
    mongoTemplate关联查询
    cas认证机制
    SpringBoot服务
    HashMap的底层实现
    maven仓库提示“Downloading: http://repo.maven.apache.org/maven2/”
    Tomcat安装SSL证书
  • 原文地址:https://www.cnblogs.com/cynchanpin/p/7015593.html
Copyright © 2011-2022 走看看