Insert elements into the selection set and sort them

effect

initialization
Mouse mouseenter event, insert a new element
Mouse click event, sorting in descending order

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="../js/d3.js"></script>
    <title>将元素插入选择集并对其进行排序-示例3-3</title>
</head>
<body onload="makeDemo33()">

    <ul id="sort"></ul>

</body>

<script>
    function makeDemo33() {
     
     
        var data = ["LiGuogang01", "LiGuogang02", "LiGuogang03"];
        var ul = d3.select("#sort");
        // 根据数据集填充无序列表。
        ul.selectAll("li").data(data).enter().append("li")
            .text(d => d);
        // 变量once用于确保新数据项只会被添加到列表一次。
        var once;
        // 为列表注册第一个事件处理程序。如果鼠标指针进入列表占用的区域，则调用回调函数。
        ul.on("mouseenter", function () {
     
     
            if (once) return;
            once = true;
            // 插入新列表项的位置是通过伪类指定的。伪类：nth-child()从1开始计数（因此：nth-child（1）等同于：first-child）。注意，在使用insert()时，我们需要分别设置绑定到每个元素的数据（使用datum()）和可视文本（使用text()）。
            ul.insert("li", ":nth-child(2)")
                .datum("LiGuogang04").text("LiGuogang04");
            // 在整个列表前面添加另一个元素，将之前添加的元素从第二推到第三。（伪类中的位置在应用伪类的时候进行计算。）
            ul.insert("li", ":first-child")
                .datum("LiGuogang05").text("LiGuogang05")
        });
        // 为列表添加第二个事件处理程序：单击事件
        ul.on("click", function () {
     
     
            // 单击鼠标后，根据绑定到列表元素的数据值，对列表元素按照降序排列。
            ul.selectAll("li").sort((a,b) => (a < b ? 1 : b < a ? -1 : 0));
        });
    }
</script>
</html>

Source address: https://github.com/lee58/d3.git

Insert elements into the selection set and sort them

effect

Guess you like