使用document.createElement('canvas')时未显示图例

问题描述

我关注了此可观察的帖子，以轻松创建图例.

I followed this Observable post to easily create a legend.

自行

DOM.canvas(1, n)

ramp中的

仅适用于Observable，我将其替换为

in the ramp works only on Observable, I replaced it with

document.createElement("canvas")

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

and also modified the SVG so that it's appended to the main div tag. These changed do not cause any errors however the problem is that the legend is not displayed even though the legend SVG is present in the raw HTML.

这是链接.任何指导将不胜感激.

Here's the link to a JSFiddle. Any guidance would be greatly appreciated.

推荐答案

正在创建画布，这不是问题.问题是，由于您现在缺少...中的宽度和高度，因此无法显示.

The canvas is being created, that's not the problem. The problem is that, since you are now missing the width and height in...

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

...您现在需要自行设置.例如:

... you now need to set those yourself. For instance:

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

这是该JSFiddle的简化版本，显示了画布可以工作:

Here is a simplified version of that JSFiddle, showing that the canvas works:

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>这样的元素.

By the way, there is no such element as <legend-svg>.

PS:这是我正在回答的关于您的第二个问题.当您不熟悉JavaScript和D3时，这里有个建议:不要尝试使用该Observable笔记本，这对于您的目的来说太复杂了.只需从头开始自己创建SVG，画布和基本轴，就会更容易.

PS: This is the second question from you I'm answering on this subject. As you're new to JavaScript and D3, here is an advice: do not try to use that Observable notebook, that's way too complicated for your purposes. Just create the SVG, the canvas and a basic axis yourself, from scratch, it will be way easier.

这篇关于使用document.createElement('canvas')时未显示图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！