个人中心
gpt4 book ai didi

javascript - 如何在服务器端使用D3js直接生成SVG？

转载 作者：搜寻专家 更新时间：2023-10-31 23:03:14 25 4
gpt4 key购买 nike

我使用了以下 D3js 教程来生成我喜欢的图表。但我必须打开 HTML 文件才能生成图表，而不是它应该是在服务器端 上生成 SVG 文件的自动化过程的一部分，而不是前端。

教程:http://bl.ocks.org/nbremer/21746a9668ffdf6d8242

Result 是一组测试数据。在实际应用程序中，它由多个进程生成 最后一步是进行小计，并从小计生成 SVG 输出并将其发送给特定的人。 

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Smoothed D3.js Radar Chart</title>

    <script src="./d3.js" charset="utf-8"></script>

    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            font-size: 11px;
            font-weight: 300;
            fill: #242424;
            text-align: center;
            text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
            cursor: default;
        }

        .legend {
            font-family: 'Raleway', sans-serif;
            fill: #333333;
        }

        .tooltip {
            fill: #333333;
        }
    </style>

</head>

<body>

    <div class="radarChart"></div>
    <a id="download" href="#">Download SVG</a>
    <script src="radarChart.js"></script>
    <script>

        const result = [1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 2, 0, 0];

        var final = sort(result);

        var margin = {
                top: 100,
                right: 100,
                bottom: 100,
                left: 100
            },
            width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
            height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);

        var data = [
            [ 
                {
                    axis: "a",
                    value: final[0],
                },
                {
                    axis: "b",
                    value: final[1],
                },
                {
                    axis: "c",
                    value: final[2],
                },
                {
                    axis: "d",
                    value:final[3],
                },
                {
                    axis: "e",
                    value: final[4],
                },
                {
                    axis: "f",
                    value:final[5],
                },
                {
                    axis: "g",
                    value: final[6],
                },
                {
                    axis: "h",
                    value: final[7],
                }
            ]
        ];

        var color = d3.scale.ordinal()
            .range(["#EDC951", "#CC333F", "#00A0B0"]);

        var radarChartOptions = {
            w: width,
            h: height,
            margin: margin,
            maxValue: 0.5,
            levels: 5,
            roundStrokes: true,
            color: color
        };

    function sort(result) {
    var newr = [
    [0],
    [0],
    [0],
    [0],
    [0],
    [0],
    [0],
    [0]
];

var j = 0;
var p = 0;
for (var i = 0; i != 7; i++) {
    var ip = 0;
    for (var k = j; k != 7; k++) {
        newr[ip].push(result[p]);
        p++;
        ip++
    }
    j++;
}
for (var i = 0; i != 7; i++) {
    ip = i + 1;
    for (var k = i + 1; k != 8; k++) {
        newr[ip].unshift(result[p]);
        p++;
        ip++
    }
}
return subtotall(newr);
}

function subtotall(newr) {
var total = [0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
        if (newr[i][j] == 1) {
            total[i] = total[i] + 1;
        }
    }
}
for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
        if (newr[j][i] == 2) {
            total[i] = total[i] + 1;
        }
    }
}
return total;
}
        RadarChart(".radarChart", data, radarChartOptions);
    var svg = d3.select(".radarChart svg")
      .attr("id", "visualization")
      .attr("xmlns", "http://www.w3.org/2000/svg");


        d3.select("#download").on("click", function(){
      d3.select(this)
        .attr("href", 'data:application/octet-stream;base64,' + btoa(d3.select(".radarChart").html()))
        .attr("download", "viz.svg") 
    })
    </script>
</body>

</html>

我不是专业的编码员，但我会努力变得更好。

最佳答案

我举了一个例子以防有帮助:

#!/usr/bin/env node
var d3 = require("d3"),
    jsdom = require("jsdom");

const { JSDOM } = jsdom;

const { document } = (new JSDOM('')).window;
global.document = document;

var body = d3.select(document).select("body");

var width = 300;
var height = 300;
var svg = body.append("svg")
    .attr("width", width)
    .attr("height", height);
svg.append("line")
    .attr("x1", 100)
    .attr("y1", 100)
    .attr("x2", 200)
    .attr("y2", 200)
    .style("stroke", "rgb(255,0,0)")
    .style("stroke-width", 2);

const fs = require('fs');
fs.writeFileSync("test.svg", body.node().innerHTML)

关于javascript - 如何在服务器端使用D3js直接生成SVG？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50000850/

25 4 0
文章推荐： javascript - 如何将表单中的 Json 发布到 Controller 然后保存到数据库
文章推荐： ios - [错误] : bad characters in classname: (null)
文章推荐： php - 从一个类的字符串名称中，我可以得到一个静态变量吗？
文章推荐： php - 如何使用 PHP 将数据存储在 RAM 内存中？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com