D3力导向图实现人际关系图-添加鼠标交互

浮生偷得半日闲

---

说明

　　目标：为昨天的力导向图添加鼠标的交互事件
　　实现思路：添加一个透明度为0的提示框，为每一个nodes和edges添加鼠标的mouseover和mouseout事件，mouseover触发时将提示框内容修改相应的提示内容并且透明度修改为1，mouseout触发时将提示框透明度改回0。

实现

添加tooltip类样式

　　首先我们要为页面添加一个tooltip类的样式，用来规范显示的提示框的样式，代码如下：

.tooltip {
        /* 为提示框添加属性，依次是：绝对定位 宽度 高度 内部居中 字体大小 背景色 边框 边框圆角*/
        position: absolute;
        width: 100px;
        height: auto;
        text-align: center;
        font-size: 18px;
        background-color: #ccc;
        border: 1px red solid;
        border-radius: 5px;
    }

添加提示框元素

　　为页面添加一个div元素，用来显示提示信息。
　　此处存在两个前面没有想到的问题：

• 当鼠标在响应的元素上移动时也要添加一个事件，这个事件的名称是mousemove，用来控制当鼠标在元素上移动时，提示框也跟着移动
• 使用opacity样式来调节元素透明度的话，即使透明度为0，元素不会在页面上显示，但是还是会覆盖其下的其他元素，影响页面元素交互，所以改为使用visibility样式来实现提示框的显示与隐藏，当其值为hidden时，元素会隐藏并且不占用页面空间；当其值为visible时，元素会正常显示。
  　　解决了以上两个问题后我们看下增加提示框的代码：

  var tooltip = d3.select("body")
                  .append("div")
                  .attr("class", "tooltip")
                  .style("visibility","hidden");

　　这样一来我们不仅完成了提示框元素的添加，还获得了一个存放提示款元素对象的变量，可以方便我们去控制提示框元素。

为点添加交互事件

　　上面我们已经说了需要添加三个事件监听，代码如下：

 nodes.on("mouseover", function(d) {// 添加鼠标放在点上的事件
	tooltip.html("关系人：" + d.name + "<br />亲密度：" + d.values)
		.style("left", (d3.event.pageX + 10) + "px")
		.style("top", (d3.event.pageY + 10) + "px")
		// .style("opacity", 1.0);
		.style("visibility", "visible");
});
nodes.on("mousemove", function(d) {// 添加鼠标在点上移动的事件
    tooltip.style("left", (d3.event.pageX + 10) + "px")
        .style("top", (d3.event.pageY + 10) + "px");
});
nodes.on("mouseout", function() {// 添加鼠标从点上移开的事件
    tooltip.style("visibility","hidden");//style("opacity", 0.0);
});

为线添加交互事件

　　线的交互添加与点类似，代码如下：

   edges.on("mouseover", function(d) {// 添加鼠标放在线上的事件
    tooltip.html(d.source.name + " > " + d.target.name + "<br />亲密度：" + d.target.values)
        .style("left", (d3.event.pageX + 10) + "px")
        .style("top", (d3.event.pageY + 10) + "px")
        // .style("opacity", 1.0);
        .style("visibility", "visible");
});
edges.on("mousemove", function(d) {// 添加鼠标在线上移动的事件
    tooltip.style("left", (d3.event.pageX + 10) + "px")
        .style("top", (d3.event.pageY + 10) + "px");
});
edges.on("mouseout", function() {// 添加鼠标从线上移开的事件
    tooltip.style("visibility", "hidden");
});

结语

　　这次完整代码就不贴了，就是在D3力导向图实现人际关系图上面添加部分内容即可。
　　虽然是周末，但是还是不想写代码，但是考虑到现实与梦想的距离，还是努力克制自己写了一点东西，关于上文的隐藏页面元素的不同方法的区别今天懒的搞了，明天有时间搞。
　　每移动一小步，你就离梦想近了一小步。