D3数据可视化(2)

最新推荐文章于 2024-05-03 18:08:38 发布

Mzjuser

最新推荐文章于 2024-05-03 18:08:38 发布

阅读量271

点赞数

分类专栏： D3-数据可视化

本文链接：https://blog.csdn.net/Mzjuser/article/details/84034462

版权

D3-数据可视化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.选择元素的函数

select:返回匹配选择器的第一个元素

selectAll:返回匹配选择器的所有元素

d3.selsct("body)
//选择body标签 
d3.select("#id")
//选择id
d3.selectAll("#id")
//选择所有id
d3.select(".class")
//选择class
d3.selectAll(".class")
//选择所有的class
d3.selectAll("ul li");
//选择所有ul中的li元素
var imp = document.getElementById("imp");
d3.select(imp);
//选择DOM API选择的元素
var imps = document.getElementsByName("imp");
d3.selectAll(imps);
//选择DOM API选择的元素

基本上用document.getElementById用select，document.getElementsByName用selectAll.

2.查看状态

d3.select和d3.selectAll返回的对象都是选择集selection

    selection.empty();  //判断数据集是否为空

    selection.node();  //返回第一个非空元素，如果数据集为空，返回null

    selection.size();    //返回数据集中的元素个数

    d3.select("circle").attr("cx");    //获取选择集某属性值

    selection.classed(name[,value]);    //获取选择集的css类

    d3.select(“p").classed("red“，true) //开启red类
                 .classed("bigsize",false);  //不开启bigsize类

    selection.style(name[,value]); //设定或者获取选择集的样式

    d3.select("p").style("color","red").style("font-size","70px");

    //文本输入框的value
    selection.property(name[,value]); //获取或者设定选择集的属性
    <input type="input" id="fname" name="fullname"/>
    d3.select("#fname").property("value");
    d3.select("#fname").property("value","lisi");  //赋值

    //相当于DOM的innerText,不包括元素内的标签
    //innerHTML包括元素内的标签
    selection.text([value]);            
    <p> This <span>is</span> a paragraph</p>
    //相当于DOM的innerHTML,包括元素内的标签
    selection.html([value]);

    selection.append(name);
    selection.insert(name[,before]);
    selection.remove();

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择集</title>
<!-- 引入D3.js库 -->
<script src="http://d3js.org/d3.v3.min.js" 
charset="utf-8"></script>
</head>
<body>
	<p>Cat</p>
	<p id="plane">Plane</p>
	<p>Ship</p>
</body>
<script type="text/javascript">
	//选择body元素
	var body = d3.select("body");
	//添加一个P元素,内容为train
	body.append("p").text("train");
	//在id为plane的元素前添加一个p元素，内容为Bike
	body.insert("p","#plane").text("Bike");
	//选择id为plane的元素
	var plane = d3.select("#plane");
	//移除id为plane的元素
	plane.remove();
</script>
</html>

3.数据绑定

Mzjuser

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3数据可视化(2)

1.选择元素的函数 select:返回匹配选择器的第一个元素 selectAll:返回匹配选择器的所有元素d3.selsct("body)//选择body标签 d3.select("#id")//选择idd3.selectAll("#id")//选择所有idd3.select(".class")//选择classd3.selectAll(".class")...
复制链接

扫一扫

专栏目录