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

【问题标题】：How to use D3js on server side to generate SVG directly?如何在服务器端使用 D3js 直接生成 SVG？
【发布时间】：2018-10-04 15:59:03
【问题描述】：

我使用了以下 D3js 教程来生成我喜欢的图表。但我必须打开 HTML 文件来生成图表，而不是它应该是在 server-side 而不是生成 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>

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

【问题讨论】：

标签： javascript node.js d3.js svg charts

【解决方案1】：

你可以看看这篇文章。在这些帖子中，一些类似的问题得到了答案。

D3js: how to generate standalone SVG files? (Nodejs)

Exporting D3.js graphs to static SVG files, programmatically

希望这些帮助和其他人来回答。

【讨论】：

【解决方案2】：

我举了一个例子以防万一：

#!/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)

【讨论】：