在cytoscape.js畫板上放置顏色說明 （在div上放置一個div）

1. 需求

最近項目在做一個關係圖譜的展示，於是使用了cytoscape.js來畫關係圖譜，後面想到對不同節點設置不同的顏色好進行區分，於是需要放置一個顏色說明模塊來對每個顏色進行說明，如下圖。

2. 實現細節

完成這個功能需要有2個div，分別是：

• 用於cytoscape.js畫板的div
• 用於放置顏色說明模塊的div

下面展示對應的2個div的html代碼（這裏只展示需要展示的代碼，其他省略）：

<!--用於放置顏色說明模塊的div -->
<div class='my-legend'>
    <div class='legend-title'>Node Colors</div>
    <div class='legend-scale'>
        <ul class='legend-labels' id="legend">
            <li id="unclusteredLegend"><span style='background:#756D76;'></span>Unclustered
            </li>
            <li><span style='background:rgb(58, 196, 255);'></span>Cluster #: 0</li>
            <li><span style='background: rgb(173, 39, 126);'></span>Cluster #: 1</li>
            <li><span style='background: rgb(65, 57, 221);'></span>Cluster #: 2</li>
            <li><span style='background: rgb(213, 125, 186);'></span>Cluster #: 3</li>
            <li><span style='background: rgb(42, 14, 16);'></span>Cluster #: 4</li>
            <li><span style='background: rgb(138, 178, 60);'></span>Cluster #: 5</li>
            <li><span style='background: rgb(239, 156, 182);'></span>Cluster #: 6</li>
            <li><span style='background: rgb(141, 202, 164);'></span>Cluster #: 7</li>
            <li><span style='background: rgb(121, 38, 189);'></span>Cluster #: 8</li>
            <li><span style='background: rgb(177, 195, 149);'></span>Cluster #: 9</li>
        </ul>
    </div>
</div>
<!--用於cytoscape.js畫板的div -->
<div id="cy" style="width: 100%;height:1000px;float: left;background-color: #f9f9f9;"></div>

下面是核心代碼，通過CSS進行樣式的控制

<style>
	/*主要是外層div的樣式來決定懸浮在面板div上，通過position和z-index控制即可*/
    .my-legend {
        position: relative;
        z-index: 1;
    }
	/*下面是顏色樣例部分的樣式*/
    .my-legend .legend-title {
        position: absolute;
        top: 10px;
        right: 20px;
        margin-bottom: 5px;
        margin-right: 5px;
        font-weight: bold;
        font-size: 90%;
    }

    .my-legend .legend-scale ul {
        margin: 0;
        margin-right: 10px;
        padding: 0;
        position: absolute;
        top: 30px;
        right: 10px;
        list-style: none;
    }

    .my-legend .legend-scale ul li {
        font-size: 80%;
        list-style: none;
        margin-left: 0;
        line-height: 18px;
        margin-bottom: 2px;
    }

    .my-legend ul.legend-labels li span {
        display: inline-block;
        float: left;
        height: 16px;
        width: 30px;
        margin-right: 5px;
        margin-left: 0;
        border: 1px solid #999;
    }

    .my-legend a {
        color: #777;
    }
</style>

3. 結果

寫着博客時節點樣式還沒有修改（主要出於保密原因只展示了部分），所以只是實現了功能，具體細節自行完成。