1

我按照这个Observable 帖子轻松创建了一个图例。

由于线

DOM.canvas(1, n)

在ramp仅在 Observable 上的作品中，我将其替换为

document.createElement("canvas")

并且还修改了 SVG 以便将其附加到主 div 标签。这些更改不会导致任何错误，但问题是即使图例 SVG 存在于原始 HTML 中，也不会显示图例。

这是 JSFiddle的链接。任何指导将不胜感激。

4

1 回答 1

1

正在创建画布，这不是问题。问题是，由于您现在缺少...的宽度和高度

const canvas = DOM.canvas(n, 1);
//these are w & h --------^--^

...您现在需要自己设置这些。例如：

d3.select(canvas).attr("width", n)
  .attr("height", 1);

这是该 JSFiddle 的简化版本，显示画布可以正常工作：

legend({
  color: d3.scaleSequential([1, 10], d3.interpolateReds),
  title: "Title"
})


function legend({
  color,
  title,
  tickSize = 6,
  width = 320,
  height = 44 + tickSize,
  marginTop = 18,
  marginRight = 0,
  marginBottom = 16 + tickSize,
  marginLeft = 0,
  ticks = width / 64,
  tickFormat,
  tickValues
} = {}) {

  const svg = d3.select(".scatter").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .style("overflow", "visible")
    .style("display", "block");

  svg.append("image")
    .attr("x", marginLeft)
    .attr("y", marginTop)
    .attr("width", width - marginLeft - marginRight)
    .attr("height", height - marginTop - marginBottom)
    .attr("preserveAspectRatio", "none")
    .attr("xlink:href", ramp(color.interpolator()).toDataURL());

}

function ramp(color, n = 256) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext("2d");
  d3.select(canvas).attr("width", n)
    .attr("height", 1);
  for (let i = 0; i < n; ++i) {
    context.fillStyle = color(i / (n - 1));
    context.fillRect(i, 0, 1, 1);
  }
  return canvas;
}
<script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
<div class="scatter">
</div>

顺便说一句，没有这样的元素<legend-svg>。

PS：这是我在这个主题上回答的第二个问题。由于您是 JavaScript 和 D3 的新手，这里有一个建议：不要尝试使用那个 Observable 笔记本，这对于您的目的来说太复杂了。只需自己创建 SVG、画布和基本轴，从头开始，会容易得多。

于 2020-02-28T03:25:57.047 回答