D3 矩形条，颜色渐变取决于值答案

【问题标题】：D3 Reactangle Bar with color gradient depending on valueD3 矩形条，颜色渐变取决于值
【发布时间】：2021-06-23 23:29:06
【问题描述】：

我正在尝试构建如下所示的内容，但无法弄清楚如何使用 d3 完成它。我尝试使用 x 轴作为刻度带并在其上放置一个矩形，但这似乎不起作用，因为轴和矩形不与值同步。有人可以帮助我解决如何完成这项工作的方法，或者一些相关示例可能会有所帮助。

图表显示收入，数字越好，颜色的梯度相应增加。

【问题讨论】：

标签： javascript d3.js data-visualization data-analysis

【解决方案1】：

这是一个带有 x 轴和线性渐变的 D3 示例：

const data = [2.3, 2.5, 3.4, 8.7, 7.8, 2.8, 2.2, 1.7];
        
// Create scale
const scale = d3.scaleLinear().domain([17, 20.5]).range([0, 400]);
                      
const tickFormat = val => {
  const year = Math.floor(val);
  const quarter = val - year  === 0.5 ? 4 : 2;
  return `${quarter}Q ${year}`;
}


// Add scales to axis
const x_axis = d3.axisBottom().scale(scale).tickFormat(tickFormat);

const svg = d3.select('svg');
    
//Insert axis
svg.append("g").attr('transform', 'translate(50,100)').call(x_axis);


const step = 400 / (data.length - 1);  

const valuesContainer = svg.append('g').attr('transform', 'translate(50,50)')

valuesContainer.selectAll('text.value')
  .data(data, (d, i) => i)
  .enter()
  .append('text')
  .classed('value', true)
  .text(d => `${d}%`)
  .attr('x', (d, i) => i * step)
  .attr('text-anchor', 'middle')
  .style('font-family', 'sans-serif')
  .style('font-size', '12px');
      
const ranges = data.slice(0, data.length - 1)
  .map((v, i) => ({from: v, to: data[i + 1]}));
      
      
const rangesContainer = svg.append('g')
  .attr('transform', 'translate(50,60)')
    
const gradients = svg.selectAll('linearGradient')
  .data(ranges, (d, i) => i)
  .enter()
  .append('linearGradient')
  .attr('id', (d, i) => `grad-${i}`)
  .attr('x1', '0%')
  .attr('x2', '100%')
      
gradients.append('stop')
  .attr('offset', '0%')
  .attr('stop-color', '#008')
  .attr('stop-opacity', d => d.from / 10);
    
gradients.append('stop')
  .attr('offset', '100%')
  .attr('stop-color', '#008')
  .attr('stop-opacity', d => d.to / 10);
      
rangesContainer.selectAll('rect.range')
  .data(ranges, (d, i) => i)
  .enter()
  .append('rect')
  .classed('range', true)
  .style('fill',(d, i) => `url(#grad-${i})`)
  .attr('x', (d, i) => i * step)
  .attr('width', step)
  .attr('height', 30)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="150">
  
</svg>

【讨论】：