条形图中的水平渐变

Question

我有条形图。

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(" + i * 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);
}

能够对图表产生渐变会很棒。横向的。

像

这样的东西

每个条形码都可以有一个特定的rgb代码，但如果全部使用单个渐变进行计算会更好。

另外，奖金问题，为什么我将白线作为我的酒吧的边框，如果我实际上没有指定任何边框（感觉像是别名的svg问题）

Answer 1

所以，我设法通过

来实现这一目标

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

稍后，对于每个bar元素追加

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

想知道这是否是快速的方法