渐变条在可视化中主要用于程度、数量占比等的颜色暗示，以此标识大致的数量。

渐变条有许多种实现方式，比如可以用canvas，可以用CSS3，可以用svg。本文将主要描述 如何用d3.js操作svg实现渐变条 。如此，在d3.js主导的可视化应用中对图表及数据的操控也能更加统一。

本质上我们是用svg实现渐变条，d3.js是方便的工具。现在先看看svg实现渐变条的原理，先上svg代码：

<svg class="chart">
    <linearGradient id="gradient">
      <stop offset="0%" stop-color="rgb(247, 251, 255)"></stop>
      <stop offset="100%" stop-color="rgb(8, 48, 107)"></stop>
    </linearGradient>
  </defs>
  <rect height="20" width="150" style="fill: url(#gradient);"></rect>
</svg>
复制代码

CodePen打开

比较陌生的元素主要是以下几个：defs、linearGradient、stop

如此我们的思路非常简单，即： defs中定义linearGradient——>rect使用linearGradient填充颜色

使用d3.js操作svg实现

在可视化应用中，我很少如此写死来绘制渐变条。如果这样子写， 各种图表的位置调整，数据绑定等都会非常地不方便 。

这里我们用d3.js来操作svg以实现。在上一节了解原理之后， 使用d3.js做些常规的元素操作 就可以实现渐变条了。

const svg = d3.select(".chart");
const defs = svg.append("defs"); //插入defs
const linearGradient = defs //defs中插入<linearGradient>
    .append("linearGradient")
    .attr("id", "gradient"); //设置对应id
linearGradient //linearGradient中插入stop元素
    .append("stop")
    .attr("offset", "0%") //设置坡度，下同
    .attr("stop-color", d3.interpolateBlues(0));//设置对应颜色，下同
linearGradient
    .append("stop")
    .attr("offset", "100%")
    .attr("stop-color", d3.interpolateBlues(1));
const rect = svg //插入rect
    .append("rect")
    .attr("height", "20")
    .attr("width", "150")
    .style("fill", "url('#gradient')");//用linearGradient填充矩形
复制代码

CodePen打开

渐变条的绘制本质上还是svg的实现，任何方式都可以实现（比如原生js）。本文通过d3.js操作svg实现了渐变条，私以为在d3.js主导绘制的图表中，使用d3.js可以更合理地使用数据，而不至于使得代码冗余、风格不合理地多样。

D3 Gradient Bar - Map Legend Example
<linearGradient>——svg
<defs>——svg
<stop>——svg
Sequential (Single Hue)
Sequential Scales

Jonithan_