D3js canvas and line are not visible

Question

I have the following code which should to display drowned line in the canvas element.

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);
}
}

Problem is that canvas and the line are available in the DOM model but are not visible (no exception is throwned). When i tried to work with SVG instead of the canvas, everything works fine.

How can I display the content in canvas using the D3.js library please? I tried to find any examples, but without the luck. Should i use D3.js fro canvas usage or something else (pure drawing to canvas in example)?

Many thanks for any advice.

Answer 1

Canvas and SVG are way different. It's not just a matter of changing "svg" for "canvas" in your d3.select("body").append() code. You should study the canvas documentation and the SVG documentation .

This, for instance, is how to draw a line in canvas :

 var chart = d3.select("body").append("canvas") .attr("width", 400) .attr("height", 300); var context = chart.node().getContext("2d"); context.beginPath(); context.moveTo(0,100);//here you set the equiv. to X1 and Y1 in SVG context.lineTo(400,100);//here you set the equiv. to X2 and Y2 in SVG context.stroke(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

Also, keep in mind that the fact that you see a given element when inspecting the DOM doesn't mean that the element will show up. You can make this very simple test using d3:

d3.select("body").append("div").append("charlesdarwin");

You're gonna see this inspecting the DOM:

<div>
    <charlesdarwin></charlesdarwin>
</div>

But, of course, you don't expect that this have any result.

Answer 2

Here is kinda an example taken from here. https://bocoup.com/weblog/d3js-and-canvas

d3 and canvas are not the same.

 var base = d3.select("#foo"); var chart = base.append("canvas") .attr("width", 400) .attr("height", 300); var context = chart.node().getContext("2d"); var data = [1,2,13,20,23]; var scale = d3.scale.linear() .range([10, 390]) .domain([1,23]); data.forEach(function(d, i) { context.beginPath(); context.rect(scale(d), 150, 10, 10); context.fillStyle="red"; context.fill(); context.closePath(); }); // Your line here... context.beginPath(); context.moveTo(10,10); context.lineTo(40,60); // x2,y2 ... context.stroke(); context.closePath(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <a href="https://bocoup.com/weblog/d3js-and-canvas">Examples here</a> <div id="foo"></div>