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函數中，使頂點可以被拖動