如何使用 d3js 制作颜色渐变条

Question

我正在尝试使用 d3js 实现渐变条，因此通过提供 2 种颜色，我需要显示从第一个颜色值开始并以另一个颜色值结束的渐变颜色。

所以它看起来类似于：

这是我使用六边形 bin 实现的散点图的图例，其中 bin 颜色表示每个点的频率。由于我正在动态构建数据，因此我需要将其附加到另一个动态构建的 SVG 中。

Answer 1

这是一些工作d3代码。

调整colors数组使代码数据驱动！

var colors = [ 'rgb(255,0,0)', 'rgb(255,255,0)' ];

var svg = d3.select('body')
  .append('svg')
  .attr('width', 100)
  .attr('height', 200);

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

grad.selectAll('stop')
  .data(colors)
  .enter()
  .append('stop')
  .style('stop-color', function(d){ return d; })
  .attr('offset', function(d,i){
    return 100 * (i / (colors.length - 1)) + '%';
  })

svg.append('rect')
  .attr('x', 10)
  .attr('y', 10)
  .attr('width', 50)
  .attr('height', 150)
  .style('fill', 'url(#grad)');


          
          

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>