Ошибка при рендеринге графика d3 на странице html - PullRequest
Новая
       70

Ошибка при рендеринге графика d3 на странице html

0 голосов
/ 19 февраля 2020

Я пытаюсь отобразить граф d3 с помощью html, когда я открываю страницу в браузере ноутбука, она работает отлично, но когда я открываю на мобильный Chrome, он показывает некоторое пустое пространство и все. Я тестировал в других мобильных браузерах, таких как Mozilla и U C, и он работает нормально. Я не знаю, в чем проблема с Chrome.

Найти html код страницы снизу 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
    <style>
        /* body {
            margin: 0 auto;
            font-weight: 300;
            vertical-align: middle;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
        } */

        body {
            display: block;
            background-color: blueviolet;
            margin: 8px;
        }

        div {
            display: block;
        }

        .dagre-d3 {
            border: 1px dashed grey;
        }

        section {
            margin-bottom: 3em;
        }

        .w-100 {
            width: 100% !important;
        }

        .h-100 {
            height: 100% !important;
        }

        .workflow-node {
            width: 275px;
            margin: 30px;
            overflow: hidden;
        }

        .icon-link {
            color: inherit;
        }

        .card {
            display: block;
            max-width: 500px;
            border: 1px solid #ddd;
            border-radius: 4px;
            /* box-shadow: 1px 1px 10px #ddd; */
        }

        button {
            float: right;
            border: 1px solid #1e78ff;
            margin-left: 5px;
            background-color: #1e78ff;
            color: #fff;
            border-radius: 4px;
        }

        a:link {
            color: #1e78ff;
            text-decoration: none;
            cursor: pointer;
        }

        .card-header {
            display: block;
            padding: 8px;
            border-bottom: 1px solid #ddd;
            background-color: #ececec;
        }

        .card-body {
            display: block;
            padding: 8px;
        }

        .card .label {
            font-weight: bold;
            float: left;
        }

        .card-success {
            background-color: #6aa84fff;
            color: #fff;
            margin-left: 15px;

        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.4/dagre-d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        document.addEventListener('message', function (data) {});
    </script>
    <!-- <script>(function(){setInterval("document.body.style.zoom=1/window.devicePixelRatio",1);var viewport=document.createElement("meta");viewport.id="viewport";viewport.name="viewport";viewport.content="width=device-width, initial-scale=1";document.body.parentElement.children[0].appendChild(viewport);})()</script> -->
</head>

<body xmlns="http://www.w3.org/1999/xhtml">
    <svg class="w-100 h-100" height="438.25">
        <g transform=""></g>
    </svg>
</body>
<script>
    const temp = {
        response: {
            success: true,
            data: {
                nodes: [{
                        schema_name: 'SSC',
                        schema_version: '1.0',
                        isSaved: true,
                        issuer_names: [{
                            issuer_did: 'KwmGMTv7Xuzgf3XsMMPwGG',
                            cred_def_Id: 'KwmGMTv7Xuzgf3XsMMPwGG:3:CL:34:Maharashtra',
                            alias: 'Prasad',
                        }, ],
                        root: true,
                        id: 'KwmGMTv7Xuzgf3XsMMPwGG:2:SSC:1.0',
                    },
                    {
                        schema_name: 'Birth Certificate',
                        schema_version: '1.0',
                        isSaved: true,
                        issuer_names: [{
                            issuer_did: 'KwmGMTv7Xuzgf3XsMMPwGG',
                            cred_def_Id: 'KwmGMTv7Xuzgf3XsMMPwGG:3:CL:29:Pune',
                            alias: 'Prasad',
                        }, ],
                        root: false,
                        id: 'KwmGMTv7Xuzgf3XsMMPwGG:2:Birth Certificate:1.0',
                    },
                    {
                        schema_name: 'Aadhar Card',
                        isSaved: true,
                        schema_version: '1.0',
                        issuer_names: [{
                            issuer_did: 'KwmGMTv7Xuzgf3XsMMPwGG',
                            cred_def_Id: 'KwmGMTv7Xuzgf3XsMMPwGG:3:CL:33:Aadhar Card',
                            alias: 'Prasad',
                        }, ],
                        root: false,
                        id: 'KwmGMTv7Xuzgf3XsMMPwGG:2:Aadhar Card:1.0',
                    },
                ],
                links: [{
                        source: 'KwmGMTv7Xuzgf3XsMMPwGG:2:Birth Certificate:1.0',
                        target: 'KwmGMTv7Xuzgf3XsMMPwGG:2:SSC:1.0',
                    },
                    {
                        source: 'KwmGMTv7Xuzgf3XsMMPwGG:2:Aadhar Card:1.0',
                        target: 'KwmGMTv7Xuzgf3XsMMPwGG:2:SSC:1.0',
                    },
                ],
            },
            message: 'success',
        },
        status: 1,
    };

    var g = new dagreD3.graphlib.Graph().setGraph({});

    let card, cardHeader, labelTitle, labelBody, buttonTitle, buttonBody, button, cardBody, span, anchor;

    temp.response.data.nodes.map((key, index) => {
        card = document.createElement('div');
        card.className = "card";
        cardHeader = document.createElement('div');
        cardHeader.className = "card-header";

        labelTitle = document.createElement('label');
        labelTitle.innerHTML = key.schema_name;

        buttonTitle = document.createElement('button');
        buttonTitle.innerHTML = "+";
        cardHeader.appendChild(labelTitle);
        cardHeader.appendChild(buttonTitle);
        card.appendChild(cardHeader);


        cardBody = document.createElement('div');
        cardBody.className = "card-body";

        card.appendChild(cardBody);

        span = document.createElement('span');
        labelBody = document.createElement('label');
        labelBody.innerHTML = 'Issuer';

        anchor = document.createElement('a');
        anchor.href = "#";
        anchor.innerHTML = key.issuer_names[0].alias;

        span.appendChild(labelBody);
        span.appendChild(anchor);

        let buttonBody = document.createElement('button');
        buttonBody.innerHTML = "+";

        cardBody.appendChild(span);
        cardBody.appendChild(buttonBody);
        g.setNode(key.id, {
            label: card,
            style: 'fill: #fff',
            paddingLeft: 0,
            paddingRight: 0,
            paddingTop: 0,
            paddingBottom: 0
        });
    });

    temp.response.data.links.map((key, index) => {
        g.setEdge(key.source, key.target, {
            curve: d3.curveLinear,
            style: 'stroke: #000;fill: none;',
        });
    });


    var render = new dagreD3.render();
    var svg = d3.select('svg'),
        inner = svg.select('g');

    console.log(JSON.stringify(g));
    render(inner, g);
    svg.selectAll("g.node").on("click", function (id) {
        var _node = g.node(id);
        console.log("Clicked " + id, _node);
        window.postMessage(_node);
    });
    // });
</script>

</html>

Вывод В Chrome браузер "Issue"

enter image description here

В U C браузер «Принят»

enter image description here

...