在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。

为了解决这个问题使用

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/