node.js - 如何在 io.js 中的 SVG 文件上添加 CSS？

Question

我正在使用 io.js、jsdom 和 D3。

我正在尝试将 css 添加到使用 D3 生成的 SVG 文件中，如本例所示 http://bl.ocks.org/mbostock/7555321

CSS是这样添加的https://developer.mozilla.org/es/docs/Web/SVG/Element/style

但不起作用，我做错了？有什么想法吗？这是我的脚本 https://gist.github.com/ripper2hl/4b0d25c90761ed7840f6

Answer 1

下面的代码工作正常并且也打印样式，也许您需要的d3做了一些奇怪的事情？你的输出是什么？有什么问题吗？

var jsdom = require("jsdom");

jsdom.env(
  "",
  [ 'http://d3js.org/d3.v3.min.js' ],
  function (err, window) {
    var d3 = window.d3;
    var document = window.document;
    var margin = {
        top : 40,
        right : 40,
        bottom : 40,
        left : 40
    };
    var width = 500 - margin.left - margin.right;
    var height = 250 - margin.top - margin.bottom;

    var svg = d3.select(document.body)
      .append("svg")
      .attr("version", 1.1)
      .attr("xmlns", "http://www.w3.org/2000/svg")
      .attr("width",width + margin.left + margin.right)
      .attr("height",height + margin.top + margin.bottom)
      .append("g")
      .attr("transform","translate(" + margin.left + "," + margin.top + ")");

    var style='\n /* <![CDATA[ */\n.bar {\n  fill: steelblue;\n}\n\n.bar:hover {\n  fill: brown;\n}\n\n.title {\n  font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;\n}\n\n.axis {\n  font: 10px sans-serif;\n}\n\n.axis path,\n.axis line {\n  fill: none;\n  stroke: #000;\n  shape-rendering: crispEdges;\n}\n\n.x.axis path {\n  display: none;\n}\n /* ]]> */\n';
    d3.select(document.head).append("style")
      .text(style);

    console.log(window.d3.select(window.document.body).html());
  }
);