I am trying to apply a pattern to a D3 bar chart, but what I get is this:
- the chart should stop exactly at 100,000
- the pattern should be "fluid"
I am using a green and red pattern defined as follows:
var defs = this.svg.append("g:defs"); defs.append("g:pattern") .attr("id", "red-fill") .attr("patternUnits", "userSpaceOnUse") .attr("width", "85") .attr("height", "10") .append("g:image") .attr("xlink:href", "../10px-barchart-red.png") .attr("x", 0) .attr("y", 0) .attr("width", 85) .attr("height", 10); var defs = this.svg.append("g:defs"); defs.append("g:pattern") .attr("id", "green-fill") .attr("patternUnits", "userSpaceOnUse") .attr("width", "85") .attr("height", "10") .append("g:image") .attr("xlink:href", "../10px-barchart-green.png") .attr("x", 0) .attr("y", 0) .attr("width", 85) .attr("height", 10);
And the plot is made with:
this.svg.selectAll("rect") .data(dataset, getKeys) .enter() .append("rect") .attr('class', 'bar') .attr("x", function(d, i) { return x(i) + 44; }) .attr("y", function(d, i) { return y(d.value); }) .attr("width", x.rangeBand()) .attr("height", function(d, i) { return height + padding - y(d.value); }) .attr("fill", function(d) { if (d.key == 0) { return "url(#green-fill)"; } else { return "url(#red-fill)"; } })