d3之选择器篇

id选择器

id选择器类似于css,前面加#即可。

<div id="d1">
        <p>hello</p>
        <p>d3</p>
        <p>world</p>
</div>

<script>
       d3.select('#d1').style('color', 'red');
</script>

效果如图：

p1.png

类选择器

类选择器也与css有类似之处，通过点(.) 加类名的方式选择，但是与css不同的是d3.select('.类名')只能选到第一个元素，如果想要选择此类名的所有元素需要加上All，即d3.selectAll('.类名')

<div class="d2">
        <p>hello</p>
        <p>d3</p>
        <p>world</p>
</div>
<div class="d2">
        <p>hello</p>
        <p>d3</p>
        <p>world</p>
</div>

<script>
       d3.select('.d2').style('color', 'red');
</script>

d3.select时:

p2.png

改将d3.select改为d3.selectAll后,所有的元素都被选中了。

<script>
       d3.selectAll('.d2').style('color', 'red');
</script>

p1.png

标签选择器，属性选择器等

标签选择器，属性选择器等都与上面的类选择器相似，如果想要选中所有的元素必须要用selectAll，不再赘述。

子级选择器

最后说下子级选择器，d3支持链式选择。

<div id="d1">
        <p>hello</p>
        <p>d3</p>
        <p>world</p>
</div>
<div class="d2">
        <p>hello</p>
        <p>d3</p>
        <p>world</p>
</div>
<div class="d2">
        <p>hello</p>
        <p>d3</p>
        <p>world</p>
</div>

<script>
var p3 = d3.select("#d1").selectAll("p").style('color', 'red');
</script>

如图：

p3.png

好啦，小编觉得选择器学到这里就OK啦，基本满足所需~