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());
  }
);

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

1 个答案: