Question

我使用D3.js生成一个SVG，我希望在没有用户交互的情况下将其保存到我的计算机中，就像svg文件或图像文件一样。我尝试了一些东西，但我没有找到答案。

这是我的代码：



    <!DOCTYPE html>
    <!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
             <svg id="visualisation" width="1000" height="500"></svg>
            <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script>
                var lineData = [{
                    x: 1,
                    y: 5
                  }, {
                    x: 20,
                    y: 20
                  }, {
                    x: 40,
                    y: 10
                  }, {
                    x: 60,
                    y: 40
                  }, {
                    x: 80,
                    y: 5
                  }, {
                    x: 100,
                    y: 60
                  }];
              
            var vis = d3.select("#visualisation"),
                WIDTH = 1000,
                HEIGHT = 500,
                MARGINS = {
                  top: 20,
                  right: 20,
                  bottom: 20,
                  left: 50
                },
                xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) {
                  return d.x;
                }), d3.max(lineData, function(d) {
                  return d.x;
                })]),
                yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) {
                  return d.y;
                }), d3.max(lineData, function(d) {
                  return d.y;
                })]),
                xAxis = d3.svg.axis()
                  .scale(xRange)
                  .tickSize(5)
                  .tickSubdivide(true),
                yAxis = d3.svg.axis()
                  .scale(yRange)
                  .tickSize(5)
                  .orient("left")
                  .tickSubdivide(true);

            vis.append("svg:g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
              .call(xAxis);

            vis.append("svg:g")
              .attr("class", "y axis")
              .attr("transform", "translate(" + (MARGINS.left) + ",0)")
              .call(yAxis);
      
      var lineFunc = d3.svg.line()
      .x(function(d) {
        return xRange(d.x);
      })
      .y(function(d) {
        return yRange(d.y);
      })
      .interpolate("linear");
      
      vis.append("svg:path")
      .attr("d", lineFunc(lineData))
      .attr("stroke", "blue")
      .attr("stroke-width", 2)
      .attr("fill", "none");
            </script>
        </body>
    </html>

我想要这个，因为我想要生成页面的PDF。

Answer 1

如果您只是想手动执行此操作（而不是以编程方式执行许多SVG），您可以在SVG显示的页面上右键单击它，在Firefox中选择“Inspect Element”（“Inspect”in Chrome），然后在“Inspector”标签（Chrome中的“Elements”）上，右键点击＆lt; svg＆gt;元素，并选择复制外部HTML的选项。然后，您可以将复制的文本粘贴到文本编辑器中，并将其另存为.svg文件。我尝试了你的例子，它在Illustrator中打开，蓝线显示lineData。

Answer 2

如果您想从svg代码中创建pdf文件，将代码导入Inkscape，然后以.pdf格式导出。然后你将有一个独立的pdf文件供使用。

Answer 3

您可以使用我创建的SaveSVG开源库来保存D3.js创建的带有外部样式表和导入的<use>符号的SVG。

如何自动保存动态生成的HTML SVG元素

3 个答案: