1.1选择select
一、核心(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()
返回在当前选择的总个数。