d3にバックグラウンドでイメージを含むsvgに行を追加する

Question

こんにちは皆、 私はd3を学んでいる間にやろうとしている仕事についていくつかの提案が必要です。私はバックグラウンドでイメージを持つSVGを持っています。私は画像を添付してこのsvgポストにパスを描こうとしています。 svgに線を描いても問題はありませんが、一度画像を追加してから描画してみると、描かれた線は画像の後ろに表示され、見えません。以下 は私がしようとしているものです：事前に

var lineData = [{"Y": 778, "X": 256}, {"Y": 736, "X": 635}]; 

var linePathGenerator = d3.svg.line() 
    .x(function(d) { return d.X; }) 
    .y(function(d) { return d.Y; }) 
    .interpolate("linear"); 

//check to see if SVG Path Mini-Language Instructions are generated 
linePathGenerator(lineData); 

var svgContainer = d3.select("body") 
    .append("svg") 
    .attr("width", "800") 
    .attr("height", "800").append("image") 
    .attr("xlink:href", "https://dl.dropbox.com/s/qn8dzj5057urskc/blank.jpg"); 


var svgPath = svgContainer 
    .append("path") 
    .attr("stroke", "blue") 
    .attr("stroke-width", "4px") 
    .attr("fill", "none"); 

svgPath.attr("d", linePathGenerator(lineData)); 

ありがとう！

Answer 1

ラインが表示されなかった理由は、イメージタグ内でレンダリングしていたためです。

var svgContainer = d3.select("body") 
    .append("svg") 
    .attr("width", "800") 
    .attr("height", "800").append("image") 
    .attr("xlink:href", "https://dl.dropbox.com/s/qn8dzj5057urskc/blank.jpg"); 

ここで、svgContainerの参照は、svgではなくimageタグです。

フィドルの作業

var lineData = [{"Y": 10, "X": 10}, {"Y": 100, "X": 100}]; 

var linePathGenerator = d3.svg.line() 
    .x(function(d) { return d.X; }) 
    .y(function(d) { return d.Y; }) 
    .interpolate("linear"); 

//check to see if SVG Path Mini-Language Instructions are generated 
linePathGenerator(lineData); 

var svgContainer = d3.select("body") 
    .append("svg") 
    .attr("width", "800") 
    .attr("height", "800"); 

svgContainer.append("image") 
    .attr("xlink:href", "https://dl.dropbox.com/s/qn8dzj5057urskc/blank.jpg"); 


var svgPath = svgContainer 
    .append("path") 
    .attr("stroke", "blue") 
    .attr("stroke-width", "4px") 
    .attr("fill", "none"); 

svgPath.attr("d", linePathGenerator(lineData)); 

この使用を修正するには：https://jsfiddle.net/GunnerSS/7fvtcLrw/