D3 - 将渐变应用于组

Question

我想在y轴上应用渐变。到目前为止，当我应用渐变时，渐变出现在每个单独的数字上，而不是平滑地流过整个事物。

渐变：

var grad_y_axis = svg.append('defs')
  .append('linearGradient')
  .attr({
    'id' : 'grad_y_axis',
    'x1' : '0%',
    'x2' : '0%',
    'y1' : '0%',
    'y2' : '100%'
  });

grad_y_axis.append('stop')
  .attr('offset', '0%')
  .style('stop-color', 'red')
  .style('stop-opacity', '0.0');

grad_y_axis.append('stop')
  .attr('offset', '40%')
  .style('stop-color', 'green')
  .style('stop-opacity', '1');

grad_y_axis.append('stop')
  .attr('offset', '60%')
  .style('stop-color', 'green')
  .style('stop-opacity', '1');

grad_y_axis.append('stop')
  .attr('offset', '100%')
  .style('stop-color', 'red')
  .style('stop-opacity', '0.0');

申请表：

svg.select('.y_axis')
  .attr('fill', 'url(#grad_y_axis)');

基本上，正在发生的事情是渐变被应用于每个单独的项目，即使我已分配给整个组！