程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了D3js:如何生成独立的SVG文件?(Node.js)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决D3js:如何生成独立的SVG文件?(Node.js)?

开发过程中遇到D3js:如何生成独立的SVG文件?(Node.js)的问题如何解决?下面主要结合日常开发的经验,给出你关于D3js:如何生成独立的SVG文件?(Node.js)的解决方法建议,希望对你解决D3js:如何生成独立的SVG文件?(Node.js)有所启发或帮助;

Github存储库 可以尝试。

D3完全不关心实际生成SVG的原因。仅创建SVG的主要问题是您不能使用JavaScript,这当然意味着您不能使用D3。除了基本的禁忌外,没有什么可以阻止您了:)

受其他答案的启发,下面是一些使用jsdom的概念验证代码。

curl http://npmJs.org/install.sh | sh       #this should work (not tested)

$npm install Jsdom

var Jsdom = require('Jsdom');

Jsdom.env(
  "<HTML><body></body></HTML>",
  [ 'http://d3Js.org/d3.v3.min.Js' ],
  function (err, window) {
    var svg = window.d3.SELEct("body")
        .append("svg")
        .attr("wIDth", 100).attr("height", 100);

    svg.append("rect")
        .attr("x", 10)
        .attr("y", 10)
        .attr("wIDth", 80)
        .attr("height", 80)
        .style("fill", "orange");
// PRINT OUT:
    console.log(window.d3.SELEct("body").HTML());
//  fs.writefileSync('out.svg', window.d3.SELEct("body").HTML()); // or this
  }
);

$node Jsdom.node.Js > test.svg

stdout输出是SVG,然后将其注入到test.svg文件中。任务完成。

正如Gilly在评论中指出的那样,您可能需要Jsdom的版本3才能起作用。

解决方法

给定D3js代码 ,例如:

var square= function() {

        var svg = window.d3.SELEct("body")

            .append("svg")

            .attr("width",100)

            .attr("height",100);

        svg.append("rect")

            .attr("x",10)

            .attr("y",10)

            .attr("width",80)

            .attr("height",80)

            .style("fill","orange");

    }

square();


svg { border: 1px solid grey;} /* just to visualized the svg file's area */


<script src="https://cdnjs.cloudFlare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<body></body>

如何使用我的D3js代码和NodeJS生成正确的独立* .svg文件?

大佬总结

以上是大佬教程为你收集整理的D3js:如何生成独立的SVG文件?(Node.js)全部内容,希望文章能够帮你解决D3js:如何生成独立的SVG文件?(Node.js)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。