進度條：如何根據進度進行顏色轉換？

Question

我一直在尋找D3 JS進度條，這是我找到的最佳匹配： https ： //bl.ocks.org/sarahob/1e291c95c4169ddabb77bbd10b6a7ef7

然而，這是一個具有三種狀態的序數域，並且對於現實生活應用幾乎不可重復使用。 我想改變它的方式，無論我將它增加到什么任意百分比; 從黃色到綠色之間的顏色將按比例變為新的進度/高度。 如何才能做到這一點？

Answer 1

D3有一堆非常有用的顏色方法（你可以在這里看到 ）和顏色方案（你可以在這里看到 ）。

但是，您所要求的可以通過簡單的線性比例來實現，如下所示（D3 v3，如您的示例所示）：

var colorScale = d3.scale.linear()
    .range(['yellow', 'limegreen']);

由於我們沒有設置域，默認情況下它將是[0, 1] ，這很方便，因為我們的進度從0％到100％。

您還可以使用三種顏色，相應地設置域：

var colorScale = d3.scale.linear()
    .domain([0, 0.5, 1])
    .range(['yellow', 'orange', 'limegreen']);

這是演示：

 var svg = d3.select('body') .append('svg') .attr('height', 100) .attr('width', 500); var segmentWidth = 300; var colorScale = d3.scale.linear() .domain([0, 0.5, 1]) .range(['yellow', 'orange', 'limegreen']); svg.append('rect') .attr('class', 'bg-rect') .attr('rx', 10) .attr('ry', 10) .attr('fill', 'gray') .attr('height', 15) .attr('width', segmentWidth) .attr('x', 0); var progress = svg.append('rect') .attr('class', 'progress-rect') .attr('fill', colorScale(0)) .attr('height', 15) .attr('width', 0) .attr('rx', 10) .attr('ry', 10) .attr('x', 0); progress.transition() .duration(5000) .attr('width', segmentWidth) .attrTween("fill", function() { return function(t) { return colorScale(t) } }); 

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

Answer 2

您可以使用兩個重疊元素而不是一個，背面為黃色，前面為綠色， opacity增加。

或者甚至更好，你可以用hls而不是rgb設置顏色，並在進度增加或減少時改變hue和lightness組件：

 const progressBar = document.getElementById('progressBar'); const range = document.getElementById('slider'); const hueStart = 60; const hueEnd = 120; const hueRange = hueEnd - hueStart; const lStart = 50; const lEnd = 32; const lRange = lEnd - lStart; range.oninput = () => { const percent = range.value; const alpha = percent / 100; const hue = hueStart + hueRange * alpha; const lightness = lStart + lRange * alpha; requestAnimationFrame(() => { progressBar.style.width = `${ percent }%`; progressBar.style.backgroundColor = `hsl(${ hue }, 100%, ${ lightness }%)`; }); }; 

 body { text-align: center; } .progressBar__base { position: relative; height: 32px; border: 3px solid black; margin: 0 0 32px; } .progressBar__progress { position: absolute; top: 0; left: 0; height: 100%; background: yellow; } 

 <div class="progressBar__base"> <div class="progressBar__progress" id="progressBar"></div> </div> <input type="range" min="0" max="100" value="0" id="slider">