Как использовать D3js на стороне сервера для генерации SVG напрямую? - PullRequest
Новая
       25

Как использовать D3js на стороне сервера для генерации SVG напрямую?

0 голосов
/ 24 апреля 2018

Я использовал следующий урок D3js , чтобы сгенерировать свой предпочтительный график.но мне пришлось открыть HTML файл для генерируемой диаграммы, вместо этого он должен быть частью автоматизированного процесса генерации SVG файла на на стороне сервера вместо передний конец * * +1010.

Учебник: 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>

Я не профессиональный кодер, но я стараюсь быть лучше.

1 Ответ

0 голосов
/ 25 апреля 2018

Вы можете посмотреть этот пост. в этих постах какой-то похожий вопрос достиг ответа.

D3js: как генерировать автономные файлы SVG? (Nodejs)

Программный экспорт графиков D3.js в статические файлы SVG

Надеюсь, что эта помощь и другие придут, чтобы ответить.

...