d3 实现 hover 展示双层圆环

前置知识

d3 可用于操作 svg。
圆形 svg：先对圆形的 svg 结构有个大体了解。
d3 api、d3 api 中文版：好用，不懂就搜。

安利一个不错的 svg 画图工具，对 svg 结构不熟悉的，可以先画个双层圆环，了解下结构。支持直接看源码，或者导出为 svg 图片，打开查看 dom 结构，都很方便。


看到结构后，稍微改改。ellipse 是椭圆，我们直接用圆即可 < circle >。

代码实现

html：

 <svg style="width: 100px; height: 100px; background: blue"></svg>

js：

 initCircle() {
      const svg = d3
        .select('svg')
        .on('mouseenter', () => {
          // 添加双层环圆 
          svg
            .insert('circle', '.node') // 在 class="node" 的元素之前插入 <circle>
            .attr('class', 'focus-node')
            .attr('cx', 50)
            .attr('cy', 50)
            .attr('r', 30)
            .attr('fill', 'transparent')
            .attr('stroke','red')
            .attr('stroke-width', '4px')
        })
        .on('mouseleave', () => {
          // 移除双层环圆 
          d3.select('.focus-node').remove()
        })
      // 画一个圆
      svg.append('circle').attr('r', 20).attr('cx', 50).attr('cy', 50).attr('class', 'node').attr('fill', 'red')
    }

效果图

鼠标移开

鼠标放入

总结

起因是业务上对 d3 的一次简单样式更改，这里记录下，整个思路过程。
首先得对 d3 有个基本了解，至少知道可以操作 svg。简单入门下，了解 api 使用。
为实现这个效果，其实本质是对 svg 的修改。那么涉及到的知识点，svg 的结构、查找节点、插入节点、画个圆、删除节点，鼠标监听事件，不确定的方法到 d3 api 上找找看，并了解下 svg 的结构。 我们的双层圆环也就实现出来了。