d3—Selection选择器

最新推荐文章于 2024-08-23 09:16:42 发布

echo-_-

最新推荐文章于 2024-08-23 09:16:42 发布

阅读量465

点赞数

文章标签：前端前端框架学习

本文链接：https://blog.csdn.net/weixin_57182748/article/details/131751672

版权

Selection选择器：

需要掌握的知识点：熟悉js选择器语法，取到了对应的dom元素才可以进行相关操作。

selection 选定节点
data binding 绑定数据

1.selection 重点概述

D3 的 selection 跟JQuery一样，都是使用 css 选择器去选 DOM 上的元素 (element)，因此使用过 JQ 的人，会比较熟悉

使用d3.selection选择对应的元素后，它会返还一个 selection 的物件实体 (或是如果画面上没有元素的话，会建立一个新的实体)，之后就可以使用这个实体拥有的函式去调整它的子集合。类似js函数中的链式调用语法

D3 selection 的运作方式是:
指定好 Dom 树位置并选取特定元素
将资料绑订到指定元素
可以去改变此元素的样式 (颜色、尺寸、位置等)
最后透过 svg 去渲染出图表

2.selectiion API

D3 官网提供多种方法去选取元素 (element)

在看官方文件时，你会发现不少 API 都被划分在 d3.selection 分类之下。其实我一开始看不太明白，而且不清楚官方文件提到的 selection 是什么，后来网上查了很多大佬的说明，d3.select 的 API 时，它会回传一个数组集合，就是被选择到的dom元素之和（这边通称为 selection）。这个集合内可能有元素，也可能没有元素 (是一个空集合)。而这个集合在资料绑定的过程，会透过 enter/exit 来决定实际上的节点数量，添加或删除不存在的节点，使得数据和元素匹配得上。

d3.select：选取符合欲选元素的第一个元素
d3.selectAll：选取符合欲选元素的所有元素

与js语法选择器类似，select只会选择查找到符合要求的第一个元素

<body>
    <div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <p id="pp">id选择</p>
        <p class="ppp">class选择</p>
    </div>
</body>
</html>
<script>
    const list = d3.select("li")   // 只取到第一个list元素
    console.log(list); 
    const list1 = d3.selectAll("li")   // 取到list数组
    console.log(list1);
    const pp = d3.select("#pp")  // 取到id为pp的元素
    console.log(pp);
    const ppp = d3.select(".ppp")  // 取到class为ppp的元素
    console.log(ppp);
</script>

3.对元素的增删改查

selection.style() 调整样式
selection.attr() 调整标签属性值
selection.append ( ) 向后加入元素
selection.remove ( ) 移除元素
selction.merge ( ) 合并元素

<body>
    <div>
    <svg width="500" height="500" style="background-color: pink;">
        <circle cx="50", cy="100" r="30" fill="blue" ></circle>
    </svg>
    <button>点我改变</button>
    </div>
</body>
</html>
<script>
    const button = document.querySelector("button")
    button.addEventListener("click",() => {
        d3.select("circle")
        .attr("fill","red")
        .attr("transform", "translate(100,40)");   // 这里更改了原点的位置和背景色以及大小
    });
</script>

<body>
    <div>
    <svg width="500" height="500" style="background-color: pink;">
        <circle cx="50", cy="100" r="30" fill="blue" ></circle>

    </svg>
    <button>点我改变</button>
    </div>
</body>
</html>
<script>
    const button = document.querySelector("button")
    button.addEventListener("click",() => {
        d3.select("svg")
          .append("text")
          .attr("x",10).attr("y",30)
          .style("font-size",18)
          .style("color","red")
          .text("echo")   // 这里是给svg添加了一个text元素
      d3.select("circle").remove()  // 删除了circle元素
    });
  
</script>