I'm relatively new to utilizing d3js and I am endeavoring to grasp the distinction between employing data and datum for associating data with elements. Despite having spent quite some time reading various materials online, I still lack an instinctive comprehension. Specifically, I am faced with a scenario where I am constructing a map using topojson in d3 v7.
Initially, here is the code snippet I have to generate the map within a div (making the assumption that height, width, projection, etc. are correctly set up):
var svg = d3.select("div#map").append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + 15 + "," + 0 + ")");
var path = d3.geoPath()
.projection(projection);
var mapGroup = svg.append("g");
d3.json("json/world-110m.json").then(function(world){
console.log(topojson.feature(world, world.objects.land))
mapGroup.append("path")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
});
The console log output for the topojson feature resembles this: https://i.sstatic.net/jKdwM.png
In addition, the map displays perfectly fine (with styling specified in a CSS file): https://i.sstatic.net/UPrcC.png
However, when I switch from datum to data, the map vanishes. I am aiming to enhance my understanding of how this operates, but I find myself struggling slightly even after scouring the resources available online. Can anyone elaborate on the disparity between data and datum as utilized in this instance and elucidate why one yields results while the other does not?
Appreciate your assistance!