Solo estoy tratando de usar D3.js para un mapa y tengo un escenario en el que quiero crear múltiples marcadores en diferentes colores para la misma ubicación. Para una ubicación de ejemplo, Nueva York tiene 2 elementos de categoría enumerados y un marcador de categoría en rojo y otro en verde. Cómo lograr eso. No importa lo que haga, solo renderizo un círculo.

 svg.selectAll(".countries").data(countries).enter().append("path").attr("class", "countries").attr("d", path); svg.selectAll(".circles") .data(listMapData) .enter() .append("circle") .attr("class", "circles") .attr("r", function (d) { return 13; }) .attr("cx", function (d) { let coords = projection([d.Coordinates.Longitude, d.Coordinates.Latitude]); return coords[0]; }) .attr("cy", function (d) { let coords = projection([d.Coordinates.Longitude, d.Coordinates.Latitude]); return coords[1]; }) .attr("fill", function (d, i) { debugger; if (d.Category.indexOf("Market Survey") >= 0) return "yellow"; else if (d.Category.indexOf("Investigation") >= 0) return "red"; else if (d.Category.indexOf("Lead") >= 0) return "green"; else if (d.Category.indexOf("Raid") >= 0) return "#943126"; else if (d.Category.indexOf("Custom Seizure") >= 0) return "#4633FF"; else if (d.Category.indexOf("Online Investigation") >= 0) return "green"; else return "#34495E"; })