d3之单选网元，加框显示。

前言：过年放了将近半个月的假期，记得年前已经实现了这个功能了，但是死活找不到写在哪了，一个一个文件夹翻，心理慌得一批，因为当时写完也没有在博客记录怎么做的，现在已经忘了，还好翻到了。

两个教训：

1.版本控制使用svn简直是太不友好...我和另外一个同学在同一个文件进行代码编写，年前需要提交一个稳定的版本，所以这些后期的功能做了没往版本上合，自己随便在以前的一个废弃的版本上编写，很不正规。以后不要出现使用废弃版本这种情况，很麻烦。

2.勤总结，解决了一个问题，就记录一下，哪怕简单的几句话，记录当时的问题，思路，解决方案，以便以后观看，用到可以回来翻看，不至于说做一个东西，过了半年，同一个需求，又去查资料.../养成坚持写博客的习惯，现在很多hr都喜欢要写博客的技术员。

废话不多说，说下今天需要解决的功能点。

问题描述：网元是图片的形式显示的，当单击选中某网元时，将其标注出，给用户直观感受，知道你选中的是哪个网元。

难点分析：只要是两个难点

1.如果要选中的是一个矩形或者是圆形这种svg创建的基本图形，那标注选中很简单，我们有很多种方法，比如改变他的边框宽度，以及边框颜色，相当于给他加个外边；或者直接改变它内部填充的颜色；或者直接改变边框颜色，都可以实现。

但是网元是图片类型，因为业务关系，不能随意更换图片，所以只能在图片周围加一个框，给圈起来，以表示选中。

2.单选网元，标注网元的状态为选中，肯定是单击网元-->显示选中-->单击其他--->取消选中，

所以需要对鼠标的左键做监听处理，判断点击的是否为网元。

解决方案：

1.首先，在svg中，path是一个神奇的东西，它可以画出任何图形，所以外面的框也用path画。我们需要新建一个path，并为它设置一个id，方便以后的操作。

ps：在创建svg g 之后紧接着创建该 path，能做到全局只存在这一个path，这也符合我们的预期，才能达到显示选中当前框的目的。

新建一个path，表示选中框。 为网元添加点击事件

上面这张图，里面的代码部分是为网元添加点击事件，监听鼠标左键点击，响应函数就是，选择之前创建的path路径，并对其位置以及样式做设置。

2.

监听左键，判别是否为点击的网元

注释写的蛮清楚，注意，函数中的第一条和第二条和这个功能无关。