Javascript 使用document.createElement（'；canvas'；）时不显示图例

我遵循观察到的帖子，轻松创造了一个传奇

自从排队

DOM.canvas(1, n)

在

渐变中

仅对可观察对象有效，我将其替换为

document.createElement("canvas")

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

---

下面是一个JSFIDLE的例子。任何指导都将不胜感激。

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

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

。。。你现在需要自己设置。例如：

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

下面是该JSFIDLE的简化版本，显示了画布的工作原理：

图例({
颜色：d3.scaleSequential（[1,10]，d3.interpolateReds），
标题：“标题”
})
函数图例({
颜色
标题
tickSize=6，
宽度=320，
高度=44+尺寸，
marginTop=18，
marginRight=0，
marginBottom=16+tickSize，
marginLeft=0，
刻度=宽度/64，
格式，
滴答声
} = {}) {
常量svg=d3。选择（“.scatter”）。追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“视图框”[0,0，宽度，高度]）
.style（“溢出”、“可见”）
.样式（“显示”、“块”）；
追加（“图像”）
.attr（“x”，边缘左）
.attr（“y”，marginTop）
.attr（“宽度”，宽度-边缘左侧-边缘右侧）
.attr（“高度”，高度-marginTop-marginBottom）
.attr（“保留Aspectratio”、“无”）
.attr（“xlink:href”，ramp（color.interpolator（））.toDataURL（））；
}
功能渐变（颜色，n=256）{
const canvas=document.createElement（'canvas'）；
const context=canvas.getContext（“2d”）；
d3.选择（画布）.attr（“宽度”，n）
.attr（“高度”，1）；
for（设i=0；i

Hi。如果你是新来的，请（这样做你会得到一个徽章）学习。在寻求调试帮助时，始终包含重现问题所需的最少代码（指向JSFIDLE的链接是次要的）@blex感谢链接，您对如何改进我的问题有具体建议吗？在寻求调试帮助时，始终包含重现问题所需的最少代码itself@blex我是否包含了太多的代码？您没有包含任何代码。相反，您包含了代码的链接，感谢您提供的简单修复，这正是我想要的。此外，谢谢你的建议，我会记住这一点，继续前进！