showing results for - "how to set markers in d3 js map projection"
Sofia
06 May 2017
1svg
2    .append("g")
3    .attr("class", "cluster-markers")
4    .selectAll("g")
5    .data(data)
6    .enter()
7    .append("g")
8    .attr("transform", function (d) {
9      return "translate(" + projection([d.lng, d.lat]) + ")";
10    })
11    .append("circle")
12    .attr("r", 1);
13//----------------------------------------------
14 svg
15      .selectAll(".mark")
16      .data(data)
17      .enter()
18      .append("image")
19      .attr("class", "mark")
20      .attr("width", 20)
21      .attr("height", 20)
22      .attr(
23        "xlink:href",
24        "https://cdn2.iconfinder.com/data/icons/bitsies/128/Location-512.png"
25      )
26      .attr("transform", function (d) {
27        return "translate(" + projection([d.lng, d.lat]) + ")";
28      });
29
30//-------------------------------------------------
31
32svg
33      .selectAll(".path")
34      .data(data)
35      .enter()
36      .append("path")
37      .attr("class", "marker")
38      .attr("width", 20)
39      .attr("height", 20)
40      .attr("transform", function (d) {
41        return "translate(" + projection([d.lng, d.lat]) + ")";
42      })
43      .attr("d", ICON)
44      .attr("fill", "red")
45      .attr("opacity", 0.4)
46