Rickshaw CSS / Axes in JSDOM [英] Rickshaw CSS/Axes in JSDOM
问题描述
我在服务器端应用程序中使用Node，以动态生成图形。我使用d3.js和rickshaw.js创建图形的SVG版本，imagemagick将该SVG转换为png。我使用JSDOM作为我的DOM。
I'm using Node on a server side application, to dynamically produce graphs. I'm using d3.js and rickshaw.js to create SVG versions of the graph, and imagemagick to convert that SVG into a png. I am using JSDOM as my DOM.
我遇到此错误： https： //github.com/shutterstock/rickshaw/issues/186
这里给出的解决方案是拉入css，我发现一个关于堆栈溢出的答案如何用JSDOM做到这一点：
The solution given here is to pull in the css, I found an answer on stack overflow on how to do this with JSDOM:
所以我遵循这些说明，并拉入了rickshaw.css。当我打印DOM到控制台，我可以看到它在头部，在一个样式元素。
So I've followed these instructions, and pulled in a rickshaw.css. When I print the DOM to console, I can see it in the head, in a style element.
var mainCss = fs.readFileSync(path.normalize("rickshaw.css"), 'utf8');
console.log("mainCss",mainCss);
var document = jsdom.jsdom("<!DOCTYPE html><html><meta http-equiv=\"content-type\"content=\"text/html; charset=utf-8\"><head></head><body id=\"abody\"><div id=\"chart_container\"><div id=\"y_axis\"></div><div id=\"chart\"></div></div></body></html>", jsdom.level(3, 'index'), {
features : {
FetchExternalResources : ['script', 'css'],
QuerySelector : true
}
});
GLOBAL.window = document.parentWindow;
var head = document.getElementsByTagName('head')[0];
style = document.createElement("style");
style.type = 'text/css';
style.innerHTML = mainCss;
head.appendChild(style);
我将图表设置为：
var graph = new Rickshaw.Graph( {
element: document.querySelector('#chart'),
width: 600,
height: 600,
series: seriesArr
});
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph
});
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph,
timeUnit: "hour"
});
yAxis.render();
xAxis.render();
graph.render();
utils.convertSVGtoPNG(document.querySelector('#chart').innerHTML);
仍然得到一个黑色的正方形，作为我的输出SVG。
Still I am getting a black square, as my output SVG.
我错过了什么？我在想什么错了吗？
Am I missing something? Am I thinking about something wrong? Any help would be greatly appreciated.
推荐答案
不幸的是，看起来像imagemagick不支持外部CSS 和其他人寻求类似问题的解决方案没有收到任何替代建议的工具。所以你必须确保相关的样式被应用于内联，以便你的SVG到PNG转换器来识别它们。
Unfortunately, it looks like imagemagick doesn't support external CSS and other people asking for solutions for similar problems haven't received any alternative suggestions for tools that do. So you're going to have to make sure that the relevant styles are applied inline in order for your SVG to PNG converter to recognize them.
通用的方式将编写一个脚本，该脚本将遍历 CSS-DOM ，抓取每个规则，选择与规则匹配的所有元素，并将相应的样式应用为内联样式。
The universal way to do this would be to write a script that traverses the CSS-DOM, grabs each rule, selects all elements that match the rule, and applies the corresponding styles to them as inline styles.
但是，这可能会对您的需要过分。您的特定问题是由< path> 元素的默认样式造成的，它是实心黑色填充，没有笔触。当使用网格线时，这意味着轴域路径绘制为覆盖整个绘图区域的实心黑色矩形。
However, that would probably be overkill for your needs. Your specific problem is caused by the default style for <path> elements, which is solid black fill and no stroke. When using grid lines, this means that the axis domain path gets drawn as a solid black rectangle covering the entire plotting area.
因此，简单的解决方案是选择这些路径绘制轴并直接应用自定义样式：
The simple solution is therefore to select these paths after drawing the axes, and apply custom styles directly:
d3.selectAll("path.domain")
.style({ fill:"none",
stroke:"black",
stroke-width:1,
});
这篇关于Rickshaw CSS / Axes in JSDOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
