d3.js - Horizontal gradient in a bar chart -
i have bar chart.
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
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
Post a Comment