0

cytoscape.jsを使用して、同時に 2 つの効果を得たいと考えています。

  1. ノード間のアークに有向矢印を表示するAND
  2. ノード間のアークのカスタム ラベルを表示します。

以下のコードを使用すると、円弧ラベルのみを表示できますが、矢印は表示されません。

コードからセグメントを削除すると

スタイル: {'ラベル': 'データ(ラベル)'},

その後、矢印を表示できますが、円弧のラベルは消えます。

さまざまな個別の js ライブラリなどの比較的複雑なシステムで自分のコードを使用する予定であるため、さまざまな状況で柔軟に使用できるソリューションを聞きたいです。ご親切にありがとうございました。

<!DOCTYPE>

<html>

<head>
    <title>cytoscape-springy.js demo</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <script src="jquery.min.js"></script>
    <script src="cytoscape.min.js"></script>
    <script src="springy.js"></script>
    <script src="./cytoscape-springy.js"></script>

    <style>

        #cy {
            width: 100%;
            height: 100%;
            position: absolute;
        //  left: 0;
        //  top: 0;
            z-index: 999;
        }


    </style>

    <script>
        $(function(){

            var cy = window.cy = cytoscape({
                container: document.getElementById('cy'),

                layout: {
                    name: 'springy',
                    directed: true
                },

                style: [

                    {
                        selector: 'node',
                        css: {
                            'content': 'data(name)'
                        }
                    },

                    {
                        selector: 'edge',

                        // to get a custom label shown for each arc
                        style: {
                        'label': 'data(label)'
                        },

                        // to get an arrowhead shown for each arc
                        css: {
                            'curve-style': 'bezier',
                            'target-arrow-shape': 'triangle',
                            'target-arrow-color': 'black',
                            'line-color': 'black',
                            'width': 3
                        }

                    }
                ],

                elements: {
                    nodes: [
                        { data: { id: 'a', name: 'a' } },
                        { data: { id: 'b', name: 'b' } },
                        { data: { id: 'c', name: 'c' } }
                    ],
                    edges: [
                        { data: { source: 'a', target: 'b', label: 'a_to_b' } },
                        { data: { source: 'b', target: 'c', label: 'b_to_c' } },
                        { data: { source: 'c', target: 'a', label: 'c_to_a' } }
                    ]
                },
            });

        });
    </script>
</head>

<body>
    <h1>cytoscape-springy demo</h1>

    <div id="cy"></div>

</body>

</html>
4

1 に答える 1

0

styleaまたはkeyの 1 つのキーを指定しますcssが、両方を指定することはできません。

                    style: {
                        'label': 'data(label)',
                        'curve-style': 'bezier',
                        'target-arrow-shape': 'triangle',
                        'target-arrow-color': 'black',
                        'line-color': 'black',
                        'width': 3
                    }
于 2016-09-26T15:15:24.673 に答える