D3：如何扩展在 D3 散点图中显示我的移动路径的时间进程（作为颜色变化）的图例？

Question

我遇到了这个问题：

我在 D3.js 中创建了一个散点图，它基本上从自上而下的角度显示了一个人的 2D 运动。为了可视化时间，我使用了 D3 方法 interpolateBlues，以便随着时间的推移，我们的点会获得另一种颜色（从白色到深蓝色）。我们的运动数据（X 和 Y 坐标）以及相应的时间值（经过的秒数）存储在 JSON 数组中。我还创建了一个工具提示函数，当您将鼠标悬停在散点图中的某个点上时，它会显示确切的 X 和 Y 坐标以及相应的时间（以秒为单位）。然而，我添加了一个额外的图例，它出现了，但太小了。当我增加高度值时，它会变大，但仅限于底部。因此，只有深蓝色值的长度会被拉伸。我找不到一种方法来拉伸或缩放整个图例，以便其他颜色也会被拉伸。

我将发布屏幕截图以及我的代码以使其更加清晰。

// Add legend
var legend = svg.append("g")
  .attr("class", "legend")
  .attr("transform", "translate(" + (width - space) + "," + space + ")")
  .attr("width", 20)
  .attr("height", 10)

var colorScale = d3.scaleSequential(d3.interpolateBlues)
  .domain([0, d3.max(movementdata, function(d) { return d.t; })]);

legend.selectAll("rect")
  .data(movementdata)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("y", function(d) { return d.t; })
  .attr("width", 20)
  .attr("height", 10)
  .style("fill", function(d) { return colorScale(d.t); });

legend.append("text")
  .attr("x", -30)
  .attr("y", -5)
  .style("font-size", "12px")
  .text("Passed Time (s)");

var legendTicks = [0, d3.max(movementdata, function(d) { return d.t; }) / 2, d3.max(movementdata, function(d) { return d.t; })];

legend.selectAll(".legend-text")
  .data(legendTicks)
  .enter()
  .append("text")
  .attr("class", "legend-text")
  .attr("x", 25)
  .attr("y", function(d) { return d; })
  .attr("dy", "1em") 
  .style("font-size", "12px")
  .text(function(d) { return d; });

调整高度属性并不能解决问题，如屏幕截图所示

Answer 1

为 Legend 创建 SVG 组：

将具有“legend”类的 SVG 组元素 () 附加到 SVG (svg) 元素。 宽度和空间变量用于在 SVG 中定位图例。 色阶：

使用 D3 中的“蓝色”颜色插值创建连续色阶 (colorScale)。 色标的域设置为从 0 到运动数据中“t”的最大值。 图例矩形 将矩形附加到图例： 运动数据绑定到图例中的矩形。 movedata 中的每个数据点都由一个矩形表示。 矩形使用色标根据“t”值填充颜色。 图例文本 向图例添加标签： 指示“经过的时间”的文本元素被添加到图例中。 图例上的刻度 向图例添加刻度线： 创建一个包含 3 个元素的数组 legendTicks：0、最大“t”值的一半以及来自运动数据的最大“t”值。 与这些刻度值相对应的文本元素将添加到图例中。 注意事项： 图例中元素的定位是使用矩形和文本的“y”属性来完成的。 刻度线的文本元素相对于矩形定位，并用 legendTicks 中的值进行标记。 此代码创建一个图例，其中的彩色矩形表示运动数据中“t”值的范围，以及相应的刻度线和标签，表示经过的时间范围（以秒为单位）。