how to set markers in d3.js map projection
svg
.append("g")
.attr("class", "cluster-markers")
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function (d) {
return "translate(" + projection([d.lng, d.lat]) + ")";
})
.append("circle")
.attr("r", 1);
//----------------------------------------------
svg
.selectAll(".mark")
.data(data)
.enter()
.append("image")
.attr("class", "mark")
.attr("width", 20)
.attr("height", 20)
.attr(
"xlink:href",
"https://cdn2.iconfinder.com/data/icons/bitsies/128/Location-512.png"
)
.attr("transform", function (d) {
return "translate(" + projection([d.lng, d.lat]) + ")";
});
//-------------------------------------------------
svg
.selectAll(".path")
.data(data)
.enter()
.append("path")
.attr("class", "marker")
.attr("width", 20)
.attr("height", 20)
.attr("transform", function (d) {
return "translate(" + projection([d.lng, d.lat]) + ")";
})
.attr("d", ICON)
.attr("fill", "red")
.attr("opacity", 0.4)