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