d3 adding custom marker to d3 map

Question

So far my map is rendering correctly. I am trying to create custom markers. I stored an image that I like in app/assets/images/map-pin2.png. How do I render this to the page? Right now the image is not showing up.

<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)
});

Here is the code which I put right below which adds marks to the map:

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>

Looks like your path to the file isn't correct. It will need to be relative to the root of the web server. — Ben Lyall, Apr 22 '15 at 00:49

score 1 · Answer 1 · answered Oct 22 '20 at 06:00

simply you can first created defs in your svg element and create your marker in this like this

svg.append("svg:defs").append("svg:marker")
.attr("id", "triangle")
.attr("refX", 13)
.attr("refY", 5)
.attr("markerWidth", 30)
.attr("markerHeight", 30)
.attr("markerUnits","userSpaceOnUse")
.attr("orient", "auto")
.append("path")
.attr("d", "M 0 0 12 6 0 12 3 6")
.style("fill", "#555");

and add this markers to your path by marker-end and marker-start attribute like this

 var link = svg.append('g')
  .attr('class', 'links')
  .selectAll('path')
  .data(graph.links)
  .enter().append('path')
  .attr("marker-end", "url(#triangle)")

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

Absent of other issues (e.g. file path issues from comments), the issue is here:

.append("image")

That should instead be:

.append("svg:image")

Duplicate here.

edited May 23 '17 at 12:32

Community

1
1

answered Apr 22 '15 at 04:54

davidhwang

1,343
1
12
19

d3 adding custom marker to d3 map

2 Answers2