D3渐变矩形，在停靠点上添加带有文本的点答案

【问题标题】：D3 gradient rectangle, add points with text on stopsD3渐变矩形，在停靠点上添加带有文本的点
【发布时间】：2020-11-07 01:20:45
【问题描述】：

此代码生成渐变矩形，我想在每个站点上添加一个具有某些值的点，我该怎么做？也许还有另一种方法可以创建更容易将它们添加为轴的渐变？无论哪种方式我都可以，我需要一个点或每个站点上的一条线来表示这是 20%、40% 等。请帮忙，谢谢。

此形状中的 ps 颜色数组用于其他目的。

const colors = [
  {r: 80, g: 0, b: 0},
  {r: 229, g: 80, b: 57},
  {r: 250, g: 211, b: 144},
  {r: 184, g: 233, b: 148},
  {r: 130, g: 204, b: 221},
  {r: 106, g: 137, b: 204},
];        
// Add gradient line
let svgGradient = d3
  .select("[id=id]")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", 10)
let padding = 0;
let defs = svgGradient.append("defs");
let mainGradient = defs.append('linearGradient')
  .attr('id', 'mainGradient');
mainGradient.selectAll("stop")
  .data(colors)
  .enter().append("stop")
  .attr("offset", function(d, x) { return `${x*20}%`; })
  .attr("stop-color", function(d) { return `rgb(${d.r}, ${d.g}, ${d.b})`; });
svgGradient.append('rect')
  .classed('filled', true)
  .attr('x', padding)
  .attr('y', padding)
  .attr('width', 250)
  .attr('height', 10);

【问题讨论】：

为什么要在渐变的<stop>s 上附加一个<g> 和一个<text>？
这是一个错误:)

标签： javascript css d3.js svg

【解决方案1】：

听起来您正在创建一个颜色条。请注意 SVG 的宽度和高度，因为如果您不小心，它们很容易将文本裁剪掉。使用 D3 时，请始终使用 DEV 工具确保在您看不到元素时放置它们。

const width = 200;
const svgHeight = 40;
const barHeight = 10;
const textHeight = 12;

const padding = 20;
const nTicks = 6; // 0, 20, 40, 60, 80, 100;

const colors = [
  {r: 80, g: 0, b: 0},
  {r: 229, g: 80, b: 57},
  {r: 250, g: 211, b: 144},
  {r: 184, g: 233, b: 148},
  {r: 130, g: 204, b: 221},
  {r: 106, g: 137, b: 204},
];        
// Add gradient line
let svgGradient = d3
  .select("[id=id]")
  .append("svg")
  .attr("width", width + 2*padding)
  .attr("height", svgHeight)
let defs = svgGradient.append("defs");
let mainGradient = defs.append('linearGradient')
  .attr('id', 'mainGradient');
mainGradient.selectAll("stop")
  .data(colors)
  .enter().append("stop")
  .attr("offset", function(d, x) { return `${x*20}%`; })
  .attr("stop-color", function(d) { return `rgb(${d.r}, ${d.g}, ${d.b})`; });
svgGradient.append('rect')
  .classed('filled', true)
  .attr('x', padding)
  .attr('width', width)
  .attr('height', barHeight);

const tickFormat = d3.format(".0%");
const ticks = new Array(nTicks)
  .fill()
  .map(function(e, i) { return i / (nTicks - 1)});

const ticksContainer = svgGradient.append('g')
  .classed('ticks', true)
  .style('transform', 'translate(' + padding + 'px, ' + barHeight + 'px)');
ticksContainer
  .selectAll('text')
  .data(ticks)
  .enter()
  .append('text')
  .text(tickFormat)
  .attr('y', textHeight)
  .attr('x', function(d) { return width * d });

.filled {
  fill: url("#mainGradient");
}

.ticks text {
  font-family: sans-serif;
  font-size: 10px;
  text-anchor: middle;
}

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

【讨论】：