CODEWITHSUNDEEP
jquerycsssvgd3.js
TFischer
TFischer

Reputation: 1348

Converting D3.js CSS Styles to Inline Styles

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/

Upvotes: 4

Views: 2763

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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.

Upvotes: 4

Related Questions