D3js（六）：支持css的tooltips

实现如下效果，不是简单的文本，而是有样式的文本

1、配置一个tooltips的div块：

                var tooltip = d3.select("#graph").append("div")
                    .attr("class", "tooltip")
                    .style("opacity", 0);

2、配置tooltips div块的css：

    <style>
        #graph .tooltip {
            position: absolute;
            padding: 2px;
            text-align: left;
            font: 8px "Hiragino Sans GB", "华文细黑", "STHeiti", "微软雅黑", "Microsoft YaHei", SimHei, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
            background: rgba(0, 0, 0, .87);
            color: #fff;
            height:auto;
            border: 0px;
            border-radius:2px;
            pointer-events: none;
        }

        #graph .tooltip hr {
            padding: 0;
            margin: 2px 0;
        }
    </style>

3、配置节点上的事件处理：

                    .on("mouseover", function (d) {
                        var node_info = ''
                        # 定义node_info的处理
                        # node_info为html文本格式
                        # 类似：'Dimensions:<br/>5.43 x 2.72 x 0.34 inches (137.84 x 69.17 x 8.59 mm)<hr/>Resolution:<br/>1080 x 1920 pixels<hr/>Processor:<br/>Quad-core, 2260 MHz, Krait 400'
                        if (node_info) {
                            tooltip.transition()
                                .duration(200)
                                .style("opacity", .9);
                            tooltip.html(node_info)
                                .style("left", (d3.event.pageX) + "px")
                                .style("top", (d3.event.pageY - 28) + "px");
                        }
                    })
                    .on("mouseout", function () {
                        tooltip.transition()
                            .duration(500)
                            .style("opacity", 0);
                    })
                    .call(force.drag);//将当前选中的元素传到drag函数中，使顶点可以被拖动