d3 добавление настраиваемого маркера к карте d3

Question

Пока моя карта правильно отображается. Я пытаюсь создать пользовательские маркеры. Я сохранил изображение, которое мне нравится в app/assets/images/map-pin2.png. Как это сделать на странице? Прямо сейчас изображение не появляется.

<style> 
path { 
    stroke: grey; 
    stroke-width: 1.00px; 
    fill: #f8f4e8; 
} 
</style> 

<script> 
var width = 650, 
    height = 380; 

var projection = d3.geo.albersUsa() 
    .scale(800) 
    .translate([width/2, height/2]) 

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

var path = d3.geo.path() 
    .projection(projection); 

var g = svg.append("g"); 

<!-- load and display the World --> 
d3.json("json/usa_map.json", function(error, us) { 
    g.selectAll("path") 
    .data(us.features) 
    .enter() 
    .append("path") 
    .attr("state", function(d) { 
     return d.properties.NAME 
    }) 
    .attr("d", path) 
}); 

Вот код, который я поставил прямо под который добавляет метки на карте:

var marks = [{long: -75, lat: 43},{long: -78, lat: 41},{long: -70, lat: 53}]; 

svg.selectAll(".mark") 
    .data(marks) 
    .enter() 
    .append("image") 
    .attr('class','mark') 
    .attr('width', 20) 
    .attr('height', 20) 
    .attr("xlink:href","/Users/Jwan/Dropbox/Turing/projects/opportunity_at_work/app/assets/images/map-pin2.png") 
    .attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";}); 
</script> 

Answer 1

Absent других вопросов (вопросы пути, например, файл с комментариями), вопрос здесь:

.append("image") 

Это должно быть вместо этого:

.append("svg:image") 

Duplicate here.