Descripción Color colocado en cytoscape.js mesas de trabajo (colocado en un div div)

1. demanda

En un reciente proyecto para hacer un mapa que muestra la relación, a continuación, utilizar los cytoscape.js para dibujar un mapa de la relación, piense en conjunto colores diferentes para los distintos nodos de distinguir el bien, por lo que la necesidad de colocar una descripción módulo de color para cada color se describe como sigue Fig.

2. Los detalles de implementación

Realizar esta función requiere dos div, a saber:

• Bloc de dibujo para cytoscape.js div
• Color Descripción div para el módulo de colocación

Div 2 a continuación muestra el código HTML correspondiente (en este caso sólo se muestra el código para ser presentado, el otro se omite):

<!--用于放置颜色说明模块的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>

Aquí está el código del núcleo, controlado por los estilos 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. resultados

Cuando se no se ha modificado un nodo de estilo blog escrito (principalmente por razones de confidencialidad sólo se muestra una parte), por lo que sólo para lograr la función, los detalles para completar.