Question

使用d3.js，我有一个带有线性渐变的简单条形图。渐变从红色开始，过渡到绿色，然后过渡到白色。图表的大部分应该为绿色，但由于现在白色开始得太早了，所以填满了大部分图表。我已经研究了起停属性，但是我无法获得正确的组合来使果岭占20％到80％。我是d3.js的新手，但尚未找到有关如何设置渐变色标的完整文本。

这是JavaScript：

var dataArray = [23, 13];

var names = [ "ABC", "DEF" ];
var widths = [ "5", "700" ]
var dists = ["45", "40"]

var svg = d3.select("svg.d3svg")
  .attr("height", "auto")
  .attr("width", "100%")

var bar = svg.selectAll("g")
  .data(dataArray)
  .enter().append("g")

var gradient = svg
    .append("linearGradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "30%")
    .attr("y2", "30%")
    .attr("x3", "100%")
    .attr("y3", "100%")
    .attr("id", "gradient")
    .attr("gradientUnits", "userSpaceOnUse")

gradient
    .append("stop")
    .attr('class', 'start')
    .attr("offset", "20%")
    .attr("stop-color", "red")
    .attr("stop-opacity", 1);

gradient
    .append("stop")
    .attr('class', 'start') /*start*/
    .attr("offset", "50%")
    .attr("stop-color", "rgb(71,164,71)")
    .attr("stop-opacity", 1);

gradient
    .append("stop")
    .attr('class', 'end')
    .attr("offset", "100%")
    .attr("stop-color", "white") /*"green"*/

var rect = bar.append('rect')
  .attr("height", "7")
  .attr("width", function(d, i) { return widths[i] })
  .attr("y", function(d, i) { return (i * dists[i]) + 30 })
  .attr("x", "0")
  .attr("fill", "url(#gradient)")

var text = bar.append('text')
  .attr("class", "text-svg")
  .text (function(d, i) { return names[i] })
  .attr("x", "0")
  .attr("y", function(d, i) { return (i * dists[i]) + 55 });

回顾一下，如何设置止损位，使图表的绿色约为80％？谢谢你的帮助。

D3.js带有多个止挡的线性渐变

0 个答案: