Предварительный рендеринг SVG в узле с расширением .SVG - PullRequest
Новая
       31

Предварительный рендеринг SVG в узле с расширением .SVG

0 голосов
/ 09 марта 2019

Я хочу предварительно визуализировать граф d3 на сервере, чтобы он обслуживал только код svg при запуске localhost: 3000 / circle.svg, поэтому в другом файле я могу получить <img src="http://localhost:3000/circle.svg />

Вот код, который у меня есть.Я могу предварительно визуализировать круг, но у меня нет файла расширения SVG, на который я могу указать, который имеет только код <svg>.Вместо этого у него есть весь дом.Но я использую JSDOM, так что, возможно, это был неправильный путь для начала.Есть мысли? 

const {send} = require('micro');

const d3 = require('d3');
const jsdom = require('jsdom');
const { JSDOM } = jsdom; 

module.exports = function(request, response) {
    const { window } = new JSDOM(`<script src="https://d3js.org/d3.v5.min.js"></script><svg id="dataviz-container"></svg>`, { runScripts: "dangerously", resources: "usable", pretendToBeVisual: true }); 

var el = window.document.querySelector('#dataviz-container')
var body = window.document.querySelector('body')
var circleId = 'a2324'  // say, this value was dynamically retrieved from some database

var clientScript = "d3.select('#" + circleId + "').transition().delay(1000).attr('fill', '#f9af26')"

    d3.select(el)
            .attr('width', 600)
            .attr('height', 300)
            .append('circle')
                .attr('cx', 300)
                .attr('cy', 150)
                .attr('r', 30)
                .attr('fill', '#26963c')
                .attr('id', circleId) // say, this value was dynamically retrieved from some database

    d3.select(body)
        .append('script')
        .html(clientScript)

    // save result in an html file, we could also keep it in memory, or export the interesting fragment into a database for later use
    var svgsrc = window.document.documentElement.innerHTML

    send(response, 200, svgsrc);
}
...