在html页面中渲染d3图形时出现的问题

问题描述 投票:0回答:1

我正在尝试使用html渲染d3图形,当我在笔记本电脑浏览器中打开页面时,它工作正常,但是当我打开移动Chrome浏览器时,它显示了一些空白。我在Mozilla和UC等其他移动浏览器中进行了测试,并且工作正常。我不知道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浏览器中为“问题”

enter image description here

在UC浏览器中为“已接受”

enter image description here

react-native google-chrome d3.js react-native-web react-native-webview
1个回答
0
投票

您能否通过更正target-densitydpi的拼写检查。

<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" />

另一件事是,我们应该避免使用target-densitydpi,因为它不稳定并且在不同的浏览器中表现不同。

© www.soinside.com 2019 - 2024. All rights reserved.