Converting D3.js CSS Styles to Inline Styles

css, d3.js, jquery, svg

Solution

The easiest thing to do is probably to set the styles you want explicitly, i.e.

svg.append("g")
  .attr("class", "xAxis")
  .attr("fill", "none")
  .attr("stroke", "black")
  .style("shape-rendering", "crispEdges")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .style("fill", "black")
  .style("stroke", "none")
  .style("text-anchor", "end")
  .attr("dx", "-.6em")
  .attr("dy", "-0.195em")
  .attr("transform", function (d) {
    return "rotate(-90)"
  });

Updated jsfiddle here.

Problem

I have two types of graphs that I am trying to export. I am using SVG Crowbar, and it works great in Chrome, but in Firefox it does not export the CSS with it (And I'm just not going to bother with IE). I have decided to convert all of the CSS to inline styles. However, I am running into 2 problems (1 with each graph). In the bar graph, I can't seem to apply the, "stroke: black;" to only the axis, and not the axis label. The, "stroke: black" is making the labels blurry, and unattractive. Here is a JSFiddle of the problem: http://jsfiddle.net/UK8bw/10/. Here is the code for the axis/labels. I tried to split them up, without success. I left the relevant CSS commented out in the CSS section. ``` svg.append("g") .attr("class", "xAxis") .attr("fill", "none") .attr("stroke", "black") .style("shape-rendering", "crispEdges") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.6em") .attr("dy", "-0.195em") .attr("transform", function (d) { return "rotate(-90)" }); svg.append("g") .attr("class", "yAxis") .attr("fill", "none") .attr("stroke", "black") .attr("shape-rendering", "crispEdges") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Y-Axis Label"); ``` I also have a pie graph. I managed to convert all of the CSS styles to inline styles, however I ran into a new problem. The legend and the graph itself are displayed on two different SVGs. Because of this, I cannot download them both to one file. Is there any way to display both the chart and the legend on the same SVG? Here is a JSFiddle: http://jsfiddle.net/NYEaX/7/

Original source