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

Question

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

所以它看起来与此相似：

这是我使用六边形分箱实现的散点图的图例，其中分档颜色表示每个点的频率。由于我正在动态构建数据，因此我需要将其附加到另一个动态构建的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>

Answer 2

您可以在svg defs中创建渐变，然后将其应用于任何svg形状。

＆＃13;

＆＃13;

    <svg width="800" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <defs>
          <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="red"/>
            <stop offset="100%" stop-color="yellow"/>
          </linearGradient>
      </defs>

      <rect x="10" y="120"  width="15" height="100" fill="url(#Gradient2)"/>
      
    </svg>

＆＃13;

＆＃13;

＆＃13;

小提琴：https://jsfiddle.net/gejuxmdx/1/

编辑：您可以将其硬编码为普通SVG或使用D3创建它，就像使用任何其他SVG一样。

Edit2：用d3做同样的事情

＆＃13;

＆＃13;

var svgSelect = d3.select('body').append('svg').attr('width',800).attr('height', 600);

var defs = svgSelect.append('defs');

var lg = defs.append('linearGradient')
 .attr('id', 'Gradient2')
 .attr('x1', 0)
 .attr('x2', 0)
 .attr('y1', 0)
 .attr('y2', 1);

lg.append('stop')
 .attr('offset', '0%')
 .attr('stop-color', 'red');

lg.append('stop')
 .attr('offset', '100%')
 .attr('stop-color', 'yellow');


svgSelect.append('rect')
 .attr('x', 10)
 .attr('y', 120)
 .attr('width', 20)
 .attr('height', 120)
 .style("fill", "url(#Gradient2)");
 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;