Reputation: 11642
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.
Upvotes: 0
Views: 817
Reputation: 102219
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.
Upvotes: 2
Reputation: 5005
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>
Upvotes: 0