Skip to content

Instantly share code, notes, and snippets.

@ripper2hl
Last active August 29, 2015 14:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ripper2hl/4b0d25c90761ed7840f6 to your computer and use it in GitHub Desktop.
Save ripper2hl/4b0d25c90761ed7840f6 to your computer and use it in GitHub Desktop.
exports.drawChart = function(data) {
var document = jsdom.jsdom();
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 x = d3.scale.ordinal().rangeRoundBands([ 0, width ], .1, .3);
var y = d3.scale.linear().range([ height, 0 ]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(8, '%');
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';
svg.append("style")
.attr('type','text/css')
.text(style);
x.domain(data.map(function(d) {
return d.name;
}));
y.domain([ 0, d3.max(data, function(d) {
return d.value;
}) ]);
svg.append("g").attr("class", "x axis").attr("transform",
"translate(0," + height + ")").call(xAxis).selectAll(".tick text")
.call(wrap, x.rangeBand());
svg.append("g").attr("class", "y axis").call(yAxis);
svg.selectAll(".bar").data(data).enter().append("rect")
.attr("class", "bar").attr("x", function(d) {
return x(d.name);
}).attr("width", x.rangeBand()).attr("y", function(d) {
return y(d.value);
}).attr("height", function(d) {
return height - y(d.value);
});
function wrap(text, width) {
text.each(function() {
var text = d3.select(this);
var words = text.text().split(/\s+/).reverse();
var word;
var line = [];
var lineNumber = 0;
var lineHeight = 1.1; // ems
var y = text.attr("y");
var dy = parseFloat(text.attr("dy"));
var tspan = text.text(null).append("tspan").attr("x", 0).attr("y",y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
//FIXME if (tspan.node().getComputedTextLength() > width) {
if (0 > width) {
line.pop();
tspan.text(line.join(" "));
line = [ word ];
tspan = text.append("tspan").attr("x", 0).attr("y",
y).attr("dy",
++lineNumber * lineHeight + dy + "em")
.text(word);
}
}
});
}
function type(d) {
d.value = +d.value;
return d;
}
return d3.select(document.body).html();
}
@ripper2hl
Copy link
Author

The problem in my code was basic, just missing add the style attribute (type='text/css') in the tag style:
svg.append("style").attr('type','text/css')
In browsers work fine without this attribute, but in a SVG file is very important

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment