我有下面的代码应该在canvas元素中显示淹死的线条。D3js的画布和线条不可见
var initCanvas = function() {
var episodeLengthInPixels = moment.duration(episodeLogLength).asSeconds() * episodeWidthMultiplication;
console.log("Length of chart is "+episodeLengthInPixels +" px");
try {
canvas = d3.select("body").append("canvas")
.attr("width", 500)
.attr("height", canvasHeight)
.attr("class", canvasSelector);
//Draw the Line
canvas.append("line") // attach a line
.style("stroke", "black") // colour the line
.attr("x1", 0) // x position of the first end of the line
.attr("x2", 500)
.attr("y1", waveHeight)
.attr("y2", waveHeight) ;
} catch (e) {
console.error(e);
}
}
问题是画布和线条在DOM模型中可用但不可见(不会抛出异常)。当我尝试使用SVG而不是画布时,一切正常。
如何使用D3.js库在画布上显示内容?我试图找到任何例子,但没有运气。我应该使用画布使用D3.js还是其他的东西(例如在画布中纯画图)?
非常感谢您的任何建议。
画布是不是基于DOM的事情。您将获得一个画布上下文并通过画布API在其上绘制线条。 –