一、核心(Core)

1.1选择

1.1.1 d3.select(selector)

​ 选择第一个与指定字符串selector匹配的元素,如果没有就返回空。

例如:

<table>
<tr>
<td>苹果</td>
<td>香蕉</td>
<td>西瓜</td>
</tr>
<tr>
<td>桃子</td>
<td id="test">草莓</td>
<td>菠萝</td>
</tr>
</table> <table>
<tr>
<td>可乐</td>
<td>牛奶</td>
</tr>
<tr>
<td>绿茶</td>
<td class="test">啤酒</td>
</tr>
</table>

下列选择器的结果:

d3.select('td')		//选择第一个td标签
d3.select('#test') //选择第一个ID名为"test"的元素
d3.select(".test") //选择第一个类名为"test"的元素

1.1.2 d3.select(node)

​ 选择指定的结点,通常用于在事件监听器中使用d3.select(this)选择当前节点。

例如,上面的表格,想要在单机body时设置选中元素的字体颜色变为绿色,可以这样

d3.select(document.body).on('click',function(){
console.log(d3.select(this));
d3.select(this).style("color","green");
})

1.1.3 d3.selectAll(selector)

​ 选择所有与指定字符串相匹配的元素,结果为一个数组,没有匹配到元素的话,返回空。

例如:

	d3.select('tr').selectAll('td').style('color','white').style('background-color','orange')

1.1.4 d3.selectAll(nodes)

​ 选择指定的结点数组

例如:

d3.selectAll(this.childNodes)	//在一个事件监听器中,选择当前元素的所有子元素
d3.selectAll(document.links) //选择文档中所有的超链接

1.1.5 selection.attr(name[value])

​ 给选中的对象设置属性,value可以是常数,也可以是函数,函数的时候有两个参数(data,index),(数据,索引)可以根据函数返回值给每个元素设置参数。

例如:

//创建矩形
rects=svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({ //一次设置多个属性值
"x":(d,i)=>{ return 20+i*160/dataset.length;}, //使用函数设置属性值
"y":d=>20,
"width":20,
"height":100
})
.attr("fill","steelblue"); //矩形颜色

1.1.6 selection.classed(name[value])

​ 为选择的元素添加,移出或者切换CSS类;value可以是函数,函数时两个参数(data,index),index是当前data在selection中的索引,函数将返回bool值;value为true时,绑定css类,false时移出css类。

例如:将rects索引为奇数的矩形填充为紫色,偶数的填充为番茄红色。

<style type="text/css">
.even{
fill:purple;
}
.odd{
fill:tomato;
}
.stroke{
stroke:deepskyblue;
stroke-width:5;
}
.opacity{
opacity:0.5;
}
</style> rects.classed({
"odd":function(d,i){ return i%2==0?true:false;},
"even":function(d,i){ return i%2==0?false:true;}
});

​ 然后,给这些矩形绑定点击事件。在点击鼠标是判断这个矩形绑定的css类,根据这个判断结果给这个矩形添加stroke类,或者取消stroke类。

rects.on('click',function(){
let rect = d3.select(this);
rect.classed('stroke opacity')?rect.classed('stroke opacity',false):rect.classed('stroke opacity',true);
})

1.1.7 selection.style(name[value[priority]])

​ 返回选择集中第一个非空元素中名为name的样式值,或者设置样式,可以同时设置多个样式,也可以使用函数设置不同的样式。

例如:为矩形设置不同的style

rects.style({
"stroke-width":5,
"stroke":(d,i)=>{
return `rgb(${10*d},${10*(25-d)},${d})`
}
})

1.1.8 selection.property(name,[value])

​ 为html中一些特殊的内置属性设置值,如表单中的value属性,复选框的checked属性,用法与前面的相同。

例如:为input输入框设置默认值,为复选框设置默认值

d3.select('#text-id').property('value',	123456);
d3.select("#check-box").property('checked',true);

1.1.9 selection.text([value])

​ 返回第一个非空元素的文本,或者为所有元素设置文本。

1.1.10 selection.html([value])

​ 设置内部html内容为value,value可以是函数,用法同上,也可以为空,为空时,返回当前的html内容。

例如:在原来的基础上增加新的内容

d3.select('body').html(function(d,i){
let old = d3.select('this').html()
return old+"<h1>HI</h1>";
})

1.1.11 selection.append(name)

​ 当前选择集的最后添加新的元素,返回的集合中包含新添加的元素。

例如:添加一个矩形

let svg = d3.select('body').append('svg');
svg.append('rect')
.attr({
x:10,
y:10,
height:100,
width:40,
fill:'orange'
});

1.1.12 selection.insert(name[before])

​ 在before前面添加元素,如果没有before的话,用法和append相同

例如:在rect前面添加circle

svg.insert('rect');
svg.insert('circle','rect');
svg.insert('circle',(d,i)=>{"rect"})

1.1.13 selection.remove()

​ 将选择的元素删除,并返回。

例如:将上面的circle删除

let removed = svg.select('circle').remove();
console.log(removed);

1.1.14 selection.data(values[key])

1.1.15 selection.datum([value])

​ 不绑定value,则返回第一个非空元素绑定的数据,绑定了value则将选中的元素值更改为value。

例如:

d3.selectAll("text").datum("aaaa").text(d=>d)	//将所有text修改为"aaaa"

​ 还可以访问来自HTML5自定义数据属性,例如:

<div data-username="D3 user"></div>
<div data-username="D3 fans"></div>
	d3.selectAll("div")
.datum(function() { return this.dataset; }) //获取HTML5自定义数据属性
.text(function(d){ return d.username;}); //使用获取的数据设置文本的值

1.1.16 selection.sort(comparator)

​ 排序,

例如:

svg.selectAll("text").sort((a,b)=>a.value-b.value)	//根据计算结果的正负来排序,为正的话,a在前。

1.1.17 selection.on(type[listener[capture]])

​ 绑定或者移除事件监听器。type是事件名,listener是函数,有d,i两个参数。

例如:

d3.select("button").on("click",function(){
d3.select("svg").selectAll("text").text(function(d,i){
return "new :"+d*3;
})
})

1.1.18 d3.event

​ 全局对象,是一个DOM事件,实现了标准事件字段,比如:时间戳、键代码等。

例如:不过鼠标位置相对于父容器的偏移坐标。

var pos = "d3.event pos"+d3.event.offsetX + ',' + d3.event.offsetY;

1.1.19 selection.transition()

​ 为选择集开启一段过度动画。

例如:

d3.select('svg').append('circle').attr({
cx:100, cy:100, r:40,
fill:'orange'
}); d3.selct('svg').select('circle').transition().attr("fill","blue");

1.1.20 selection.call(function[argument])

​ 调用指定的函数,使用这种方式调用函数,方便链式调用。

需要注意的是,function的第一个参数。

例如:

function	fill(ele,fill){
this.style("fill",fill);
} rect.call(fill,"orange");
circle.call(fill,"tomato");

1.1.21 selection.empty()

​ 当前选择为空的话,返回true。

1.1.22 selection.node()

​ 返回当前选择的第一个非空的元素。如果为空,返回null。

1.1.23 selection.size()

​ 返回在当前选择的总个数。

1.2 过渡

1.1选择select的更多相关文章

  1. jquery datatable 多行(单行)选择(select),行获取/行删除

    jquery datatable 多行(单行)选择(select),行获取/行删除 代码展示 // 示例数据源 var dataSet = [ ['Tasman','Internet Explorer ...

  2. 一.Windows I/O模型之选择(select)模型

    1.选择(select)模型:选择模型:通过一个fd_set集合管理套接字,在满足套接字需求后,通知套接字.让套接字进行工作.避免套接字进入阻塞模式,进行无谓的等待.选择模型的核心的FD_SET集合和 ...

  3. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  4. 选择select框跳出信息

    <html > <body > <select type="select" name=s1 onChange=alert("你选择了&quo ...

  5. 下拉选择select和复选框checkbox的状态的各种方式

    复选框的状态 <input name="ck" value=" " type="checkbox"  checked> 或者&l ...

  6. 选择…Select…(Power Query 之 M 语言)

    选择行: 筛选Table.SelectRows-文本与数值 筛选Table.SelectRows-日期与时间 保留错误行:= Table.SelectRowsWithErrors( 表, {" ...

  7. redis数据库选择-select

    1.关于redis的select命令用法: SELECT index 切换到指定的数据库,数据库索引号 index 用数字值指定,以 0 作为起始索引值. 默认使用 0 号数据库. 可用版本: > ...

  8. Web前端:如何实现选择select下拉框选中跳转其他页面

    <select onchange="window.location=this.value;"><option value="a.html"&g ...

  9. 根据value选择select

    <script> var tem="{$Zgoods.type_2}"; $("#type_2 option[value='"+tem+" ...

随机推荐

  1. Hack the De-ICE: S1.120 VM (Boot to Root)

    下载地址: https://www.vulnhub.com/entry/de-ice-s1120,10/ 静态IP:192.168.1.120 主机扫描: ╰─ nmap -p1-65535 -sV ...

  2. 【红宝书】第20章.JSON

      JSON是一种轻量级的数据格式.JSON使用JS语法的子集表示对象.数组.字符串.数值.布尔值和null,不支持undefined JSON.stringify() // JSON.stringi ...

  3. UE4入门学习笔记开篇

    做了3年的Unity, 现在开始转入到做UE4,一来就进入一个超大项目组中学习,度过了最初2个月的生涩和紧张后,现在准备开始慢慢总结,慢慢学习,逐步深入理解和研究UE. 做了3年的游戏开发后,个人感悟 ...

  4. Yii2中多表关联查询

    准备条件: 1.首先准备两张表: customer(用户表)(id, name) order(订单表)(id, customer_id, price) customer 表和 order 表之间是一对 ...

  5. 提升代码幸福度,五个技巧减少js开发中的if else语句

     壹 ❀ 引 在JavaScript开发中,条件判断语句的使用频率是极高的,而对于条件判断简单易读的if else应该都是大家的首选.可是代码写的久了,我们总是希望自己的代码看着能更为简洁规范(逼格更 ...

  6. PlayJava Day027

    进程状态 1.创建状态:在程序中用构造方法创建了一个线程对象后,新的线程对象便处于新建状态 此时,它已经有了相应的内存空间和其他资源,但还处于不可运行状态 新建一个线程对象可采用Thread类的构造方 ...

  7. JavaScript 递归遍历json串获取相关数据

    递归遍历json串获取相关数据   by:授客 QQ:1033553122 1.   测试数据 // 导航菜单 [ { id: 1, parentId: 0, parentName: null, na ...

  8. 基于webpack实现多html页面开发框架七 引入第三方库如jquery

    一.解决什么问题 1.如何引入第三方库,如jquery等 二.引入jquery方法 1.下载jquery.min.js放到assets/lib下面 2.安装copy-webpack-plugin,将已 ...

  9. 数据库三,exec内置函数

    数据库三,exec内置函数 一.数据库查询与执行顺序 必备知识 查询语句的基本操作 - select - from - where - group by - having - distinct - o ...

  10. Angular框架入门

    今天简单学习了AngularJS框架,在这里我想简单的总结一下我所了解的AngularJS和一些入门案例! 首先,我们要知道什么是AngularJS? AngularJS  诞生于2009年,由Mis ...