D3jsキャンバスと線は表示されません

Question

キャンバス要素に溺れた線を表示する必要がある次のコードがあります。

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モデルで利用可能であるが、（例外がthrownedされていない）は表示されません。私がキャンバスの代わりにSVGを使って作業しようとすると、すべて正常に動作します。

D3.jsライブラリを使用してキャンバスにコンテンツを表示するにはどうすればよいですか？私は何かの例を見つけようとしましたが、運がありません。私はD3.jsをキャンバスに使用するか、それ以外のものを使用すべきですか？

アドバイスをいただき、ありがとうございます。

Answer 1

CanvasおよびSVGは異なっています。 d3.select("body").append()コードの "キャンバス"の "svg"を変更するだけではありません。 canvas documentationとSVG documentationを調べる必要があります。

これは、例えば、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>

また、指定した要素を参照してくださいという事実は、DOMのdoesnを検査する場合があることに注意してください要素が表示されることを意味しません。あなたはD3を使用して、この非常に簡単なテストを行うことができます。

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

あなたは、これはDOMを検査参照つもりだ：

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

しかし、もちろん、あなたが、これは任意の結果を持っていることを期待しないでください。

Answer 2

こちらはここからの例です。 https://bocoup.com/weblog/d3js-and-canvas

d3とキャンバスは同じではありません。

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>