d3.js v4入门之——选择器

D3提供了两种高级方法来选择元素：select和selectAll。这些方法接收选择器字符串。前者只返回第一个匹配的元素，后者选择在文档遍历次序中所有匹配的元素。这个方法也可以接收节点，这可以用来和第三方库例如JQuery或者开发工具($0)整合。

选中标签节点或对应的选择器(.class #id)

<!--
@author Semper_Fi
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <title></title>
    <style>
    </style>
</head>

<body>
    <p>Hello D3.js</p>
    <p>Hello D3.js</p>
    <h4 class="change-class">666666666666</h4>
    <h6>tom</h6>
    <h6 id="change-id">jerry</h6>
    <h6 class="change-class">jason</h6>
    <a id="baidu" href="http://www.baidu.com">baidu</a>
    <p id='p'>pppppppppppppp</p>
</body>
<script>
    d3.select("body").selectAll("p").text("选择body标签下的所有P标签中的文字进行替换");
    d3.select("body").select("h4").text("选择body标签下的h4标签中的文字进行替换");
    // selectAll select这两个函数返回的结果称为选择集,选择集和绑定数据通常是一起使用的。
    d3.select("h6").text("直接选择h6标签中的文字进行替换"); // 只会改变第一个匹配上的值
    // D3 中是通过以下两个函数来绑定数据的,
    // datum()：绑定一个数据到选择集上
    // data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
    var h6 = d3.selectAll("h6");
    var str = ", 新的数据"
    // 当选择集需要使用被绑定的数据时，常需要这么使用。其包含两个参数，其中：val 代表数据，也就是与某元素绑定的数据。
    // index 代表索引，代表数据的索引号，从 0 开始
    h6.datum(str).text(function(val, index){
        return "第" + index + "个数据绑定" + val;
    })

    var set = ["喜欢狗", "喜欢猫", "喜欢猪"];
    var p = d3.selectAll("p");

    p.data(set).text(function(val, index){
        return val;
    })

    var p1 = d3.select("p");
    p1.style("color", "red");

    // 通过id选择器，精准选择要改变的标签
    var h6_1 = d3.select("#change-id");
    h6_1.style("color", "yellow");
    // 通过class选择器批量选择要改变的标签
    var clas = d3.selectAll(".change-class");
    clas.style("color", "orange");

    // 在所有p标签后新增一个p标签,且该标签和前一个标签具有相同的样式
    d3.select("body").selectAll("p").append("p").text("在所有p标签后新增一个p标签");

    // 在id=baidu的标签前插入p标签
    d3.select("body").insert("p", "#baidu").text("在id=baidu的标签前插入一个p标签")

    //
</script>
</html>

d3.js v4入门之——选择器

选中标签节点或对应的选择器(.class #id)

悦读