d3.js - Horizontal gradient in a bar chart -


i have bar chart.

enter image description here

function svg_render(data, svg) {  var node = d3.select(svg).append("svg") .attr("class", "chart") .attr("width", width) .attr("height", height);  var y = d3.scale.linear().range([height, -height]); var max_val = d3.max(data, function(d) { return d; }); y.domain([-max_val, max_val]); var x = d3.scale.linear().domain([0, data.length]); var bar_width = width / data.length;  var chart = node.attr("width", width).attr("height", height);  var bar = chart.selectall("g") .data(data) .enter().append("g") // svg "group" .attr("transform", function(d, i) {   return "translate(" + * bar_width + ",0)"; });  bar.append("rect") .attr("y", function(d) {   var yv = height - math.abs(y(d) / 2) - height / 2 + 2;   return yv; }) .attr("height", function(d) {   return math.abs(y(d)); }) .attr("width", bar_width);  var axis = d3.svg.axis() .scale(y) .ticks(12) .orient("left");  d3.select(".svg").append("svg") .attr("class", "axis") .attr("width", 60) .attr("height", height) .append("g") .attr("transform", "translate(40," + (height / 2) + ")") .call(axis); } 

would great able have gradient towards chart. horizontal one.

something

enter image description here

each bar can have specific rgb code, better if calculated single gradient.

also, bonus question, why have white lines border of bars if didn't specify border @ (feels aliasing svg issue)

so, managed achieve doing

var color = d3.scale.linear() .domain([0, width]) .range(["hsl(62,100%,90%)", "hsl(222,30%,20%)"]); 

and later on, each bar element append

.style("fill", function(d, i) {   return color(i); }); 

wonder if it's fast way this


Comments

Popular posts from this blog

1111. appearing after print sequence - php -

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -