D3 数据可视化文字二叉树绘制

无bug代码搬运工

于 2023-05-16 18:07:27 发布

阅读量120

点赞数

文章标签：信息可视化 python html

本文链接：https://blog.csdn.net/DoKiDoK/article/details/130711229

版权

<html>
<head>
    <title>
        文字二叉树
    </title>
</head>
<meta charset="utf-8">
<body>

<form style="text-align:center ">
    <div style="font-size: 100px">文字二叉树绘制</div>
</form>
<form style="text-align:right ">
    <div style="font-size: 50px">myname</div>
</form>
<svg id="mySvg" >
</svg>
<script>
    var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
    var h = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
    var mysvg = document.getElementById("mySvg");
    w = w * 0.98;
    h = h * 0.98;
    mysvg.setAttribute("width", w);
    mysvg.setAttribute("height", h);

    var x0 = w / 2;
    var y0 = h-150;

    var rate = 0.7;
    var a = 0;
    var count = 8;
    var iter = 200;

    var txt1 = new Array;
    var str = "君不见黄河之水天上来";

    function show(x0, y0,  rate, a, count) {
        var r = Math.random();
        var fontsize = 3 * count * (0.5 + 0.5 * r);
        var L = str.length* fontsize;

        var x1 = x0;
        var y1 = y0;

        var x2 = x1 + L   * Math.cos(a);
        var y2 = y1 + L   * Math.sin(a);

        iter++;
        var aL = a - Math.PI / 6 * (0.5 + 0.5 * r);
        var aR = a + Math.PI / 6 * (0.5 + 0.5 * r);

        var words = document.createElement("text");
        mysvg.appendChild(words);
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        words.outerHTML = "<text x=" + x1 + " y=" + y1 + " transform='rotate(" + (a * 180 / Math.PI) + "," + x1 + "," + y1 + ")'   fill='rgb(" + r + "," + g + "," + b + ")' font-size=" + fontsize + ">" + str + "</text>";

        if (count > 0) {
            show(x2, y2,  rate, aL, count - 1);
            show(x2, y2,  rate, aR, count - 1);
            if (count == 1) {
                var circle = document.createElement("circle");
                mysvg.appendChild(circle);
                circle.outerHTML = "<circle cx= " + x2 + " cy= " + y2 + "  r=" + 5*Math.random() + "  fill='pink'>";
            }
        }
    }
    show(x0, y0,  rate, -Math.PI / 2, count);
</script>
</body>
</html>