Question

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.

I am getting this error: https://github.com/shutterstock/rickshaw/issues/186

The solution given here is to pull in the css, I found an answer on stack overflow on how to do this with JSDOM:

How do you ad stylesheets to JSDOM

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

I'm setting up my graph as so:

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

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.

Was it helpful?

Solution

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.

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.

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

OTHER TIPS

If anyone is interested in the d3 selectors to replicate all css, as recommended by Amelia here they are:

    d3.selectAll("path.domain")
  .style({ "fill":"none",
           "stroke":"black",
           "stroke-width":1
        });

d3.selectAll("path.domain")
    .style({
    "fill": "none",
        "stroke": "black",
        "stroke-width": "1"
});

d3.selectAll(".rickshaw_graph .detail")
    .style({
    "pointer-events": "none",
        "position": "absolute",
        "top": "0",
        "z-index": "2",
        "background": "rgba(0, 0, 0, 0.1)",
        "bottom": "0",
        "width": "1px",
        "transition": "opacity 0.25s linear",
        "-moz-transition": "opacity 0.25s linear",
        "-o-transition": "opacity 0.25s linear",
        "-webkit-transition": "opacity 0.25s linear"
});

d3.selectAll(".rickshaw_graph .detail.inactive ")
    .style({
    "opacity": "0"
});

d3.selectAll(".rickshaw_graph .detail .item.active ")
    .style({
    "opacity": "1"
});
d3.selectAll(".rickshaw_graph .detail .x_label ")
    .style({
    "font-family": "Arial, sans-serif",
        "border-radius": "3px",
        "padding": "6px",
        "opacity": "0.5",
        "border": "1px solid #e0e0e0",
        "font-size": "12px",
        "position": "absolute",
        "background": "white",
        "white-space": "nowrap"
});
d3.selectAll(".rickshaw_graph .detail .x_label.left ")
    .style({
    "left": "0"
});
d3.selectAll(".rickshaw_graph .detail .x_label.right ")
    .style({
    "right": "0"
});
d3.selectAll(".rickshaw_graph .detail .item ")
    .style({
    "position": "absolute",
        "z-index": "2",
        "border-radius": "3px",
        "padding": "0.25em",
        "font-size": "12px",
        "font-family": "Arial, sans-serif",
        "opacity": "0",
        "background": "rgba(0, 0, 0, 0.4)",
        "color": "white",
        "border": "1px solid rgba(0, 0, 0, 0.4)",
        "margin-left": "1em",
        "margin-right": "1em",
        "margin-top": "-1em",
        "white-space": "nowrap"
});
d3.selectAll(".rickshaw_graph .detail .item.left ")
    .style({
    "left": "0"
});
d3.selectAll(".rickshaw_graph .detail .item.right ")
    .style({
    "right": "0"
});
d3.selectAll(".rickshaw_graph .detail .item.active ")
    .style({
    "opacity": "1",
        "background": "rgba(0, 0, 0, 0.8)"
});

d3.selectAll(".rickshaw_graph .detail .dot ")
    .style({
    "width": "4px",
        "height": "4px",
        "margin-left": "-2px",
        "margin-top": "-2px",
        "border-radius": "5px",
        "position": "absolute",
        "box-shadow": "0 0 2px rgba(0, 0, 0, 0.6)",
        "background": "white",
        "border-width": "2px",
        "border-style": "solid",
        "display": "none",
        "background-clip": "padding-box"
});
d3.selectAll(".rickshaw_graph .detail .dot.active ")
    .style({
    "display": "block"
});
/* graph */

d3.selectAll(".rickshaw_graph ")
    .style({
    "position": "relative"
});
d3.selectAll(".rickshaw_graph svg ")
    .style({
    "display": "block",
        "overflow": "hidden"
});


d3.selectAll(".rickshaw_graph .x_tick ")
    .style({
    "position": "absolute",
        "top": "0",
        "bottom": "0",
        "width": "0px",
        "border-left": "1px dotted rgba(0, 0, 0, 0.2)",
        "pointer-events": "none"
});
d3.selectAll(".rickshaw_graph .x_tick .title ")
    .style({
    "position": "absolute",
        "font-size": "12px",
        "font-family": "Arial, sans-serif",
        "opacity": "0.5",
        "white-space": "nowrap",
        "margin-left": "3px",
        "bottom": "1px"
});


d3.selectAll(".rickshaw_annotation_timeline ")
    .style({
    "height": "1px",
        "border-top": "1px solid #e0e0e0",
        "margin-top": "10px",
        "position": "relative"
});
d3.selectAll(".rickshaw_annotation_timeline .annotation ")
    .style({
    "position": "absolute",
        "height": "6px",
        "width": "6px",
        "margin-left": "-2px",
        "top": "-3px",
        "border-radius": "5px",
        "background-color": "rgba(0, 0, 0, 0.25)"
});
d3.selectAll(".rickshaw_graph .annotation_line ")
    .style({
    "position": "absolute",
        "top": "0",
        "bottom": "-6px",
        "width": "0px",
        "border-left": "2px solid rgba(0, 0, 0, 0.3)",
        "display": "none"
});
d3.selectAll(".rickshaw_graph .annotation_line.active ")
    .style({
    "display": "block"
});

d3.selectAll(".rickshaw_graph .annotation_range ")
    .style({
    "background": "rgba(0, 0, 0, 0.1)",
    "display": "none",
    "position": "absolute",
    "top": "0",
    "bottom": "-6px"
});
d3.selectAll(".rickshaw_graph .annotation_range.active ")
    .style({
    "display": "block"
});
d3.selectAll(".rickshaw_graph .annotation_range.active.offscreen ")
    .style({
    "display": "none"
});

d3.selectAll(".rickshaw_annotation_timeline .annotation .content ")
    .style({
    "background": "white",
        "color": "black",
        "opacity": "0.9",
        "padding": "5px 5px",
        "box-shadow": "0 0 2px rgba(0, 0, 0, 0.8)",
        "border-radius": "3px",
        "position": "relative",
        "z-index": "20",
        "font-size": "12px",
        "top": "18px",
        "left": "-11px",
        "width": "160px",
        "display": "none",
        "cursor": "pointer"
});



d3.selectAll(".rickshaw_annotation_timeline .annotation.active .content ")
    .style({
    "display": "block"
});
d3.selectAll(".rickshaw_annotation_timeline .annotation:hover .content ")
    .style({
    "display": "block",
        "z-index": "50"
});
d3.selectAll(".rickshaw_graph .y_axis, .rickshaw_graph  .x_axis_d3 ")
    .style({
    "fill": "none"
});
d3.selectAll(".rickshaw_graph .y_ticks .tick, .rickshaw_graph .x_ticks_d3 .tick ")
    .style({
    "stroke": "rgba(0, 0, 0, 0.16)",
        "stroke-width": "2px",
        "shape-rendering": "crisp-edges",
        "pointer-events": "none"
});

d3.selectAll(".rickshaw_graph .y_grid .tick, .rickshaw_graph .x_grid_d3 .tick ")
    .style({
    "z-index": "-1",
        "stroke": "rgba(0, 0, 0, 0.20)",
        "stroke-width": "1px",
        "stroke-dasharray": "1 1"
});
d3.selectAll(".rickshaw_graph .y_grid .tick[data-y-value=\"0\"] ")
    .style({
    "stroke-dasharray": "1 0"
});
d3.selectAll(".rickshaw_graph .y_grid path,.rickshaw_graph .x_grid_d3 path  ")
    .style({
    "fill": "none",
        "stroke": "none"
});
d3.selectAll(".rickshaw_graph .y_ticks path, .rickshaw_graph .x_ticks_d3 path ")
    .style({
    "fill": "none",
        "stroke": "#808080"
});
d3.selectAll(".rickshaw_graph .y_ticks text, .rickshaw_graph .x_ticks_d3 text ")
    .style({
    "opacity": "0.5",
        "font-size": "12px",
        "pointer-events": "none"
});
d3.selectAll(".rickshaw_graph .x_tick.glow .title, .rickshaw_graph .y_ticks.glow text ")
    .style({
    "fill": "black",
        "color": "black",
        "text-shadow":
        "-1px 1px 0 rgba(255, 255, 255, 0.1),1px -1px 0 rgba(255, 255, 255, 0.1),1px 1px 0 rgba(255, 255, 255, 0.1),0px 1px 0 rgba(255, 255, 255, 0.1),0px -1px 0 rgba(255, 255, 255, 0.1),1px 0px 0 rgba(255, 255, 255, 0.1),-1px 0px 0 rgba(255, 255, 255, 0.1),-1px -1px 0 rgba(255, 255, 255, 0.1)"
});

d3.selectAll(".rickshaw_graph .x_tick.inverse .title, .rickshaw_graph .y_ticks.inverse text")
    .style({
    "fill": "white",
        "color": "white",
        "text-shadow": "-1px 1px 0 rgba(0, 0, 0, 0.8),1px -1px 0 rgba(0, 0, 0, 0.8),1px 1px 0 rgba(0, 0, 0, 0.8),0px 1px 0 rgba(0, 0, 0, 0.8),0px -1px 0 rgba(0, 0, 0, 0.8),1px 0px 0 rgba(0, 0, 0, 0.8),-1px 0px 0 rgba(0, 0, 0, 0.8),-1px -1px 0 rgba(0, 0, 0, 0.8)"
});
d3.selectAll(".rickshaw_legend ")
    .style({
    "font-family": "Arial",
        "font-size": "12px",
        "color": "white",
        "background": "#404040",
        "display": "inline-block",
        "padding": "12px 5px",
        "border-radius": "2px",
        "position": "relative"
});

d3.selectAll(".rickshaw_legend .swatch ")
    .style({
    "width": "10px",
        "height": "10px",
        "border": "1px solid rgba(0, 0, 0, 0.2)"
});
d3.selectAll(".rickshaw_legend .line ")
    .style({
    "clear": "both",
        "line-height": "140%",
        "padding-right": "15px"
});
d3.selectAll(".rickshaw_legend .line .swatch ")
    .style({
    "display": "inline-block",
        "margin-right": "3px",
        "border-radius": "2px"
});
d3.selectAll(".rickshaw_legend .label ")
    .style({
    "margin": "0",
        "white-space": "nowrap",
        "display": "inline",
        "font-size": "inherit",
        "background-color": "transparent",
        "color": "inherit",
        "font-weight": "normal",
        "line-height": "normal",
        "padding": "0px",
        "text-shadow": "none"
});

d3.selectAll(".rickshaw_legend .action ")
    .style({
    "margin-right": "0.2em",
        "font-size": "10px",
        "opacity": "0.2",
        "cursor": "pointer"
});
d3.selectAll(".rickshaw_legend .line.disabled ")
    .style({
    "opacity": "0.4"
});
d3.selectAll(".rickshaw_legend ul ")
    .style({
    "list-style-type": "none",
        "margin": "0",
        "padding": "0",
            "cursor": "pointer"
    });
    d3.selectAll(".rickshaw_legend li ")
        .style({
        "padding": "0 0 0 2px",
            "min-width": "80px",
            "white-space": "nowrap"
    });

It isn't formatted well, and I've had to remove any class that had pseudo-selectors.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top