d3.js如何在国家/地区地图中为每个州创建单独的元素？

Question

I want to apply style to different states in a map of India: for now, a darker shade of some color based on certain data.

First I think I need to create a separate element for each state, and then set its fill color to a function of my data.

I'm really new to this. So this is probably quite easy to answer. I can't figure it out.

I tried to copy Bostock's code to create a separate path element for each country in the UK:

svg.selectAll(".subunit")
.data(topojson.feature(uk, uk.objects.subunits).features)
.enter().append("path")
.attr("class", function(d) { return "subunit " + d.id; })
.attr("d", path);

I have a geojson file called indiastates.geojson. The states appear to be labeled like so: "NAME_1": "Andaman and Nicobar".

What does the .data line need to say in my code? I keep getting errors that say topojson (or geojson, if I change topjson to geojson) is undefined.

I also wonder if this is doing almost the same thing?

var areas = group.append("path")
.attr("d", path)
.attr("class", "area")
.attr("stroke", "black")
.style("fill", "rgb(255, 102, 102)");

Answer 1

Sounds like what you want to do is create a "choropleth" map of the US If you have a topojson states file, that's a good starting point, but it might need to be converted to CSV. Unfortunately, it's been 2+ years since I created a choropleth, and I did it in something other than D3js. Fortunately, there are a variety of tutorials. Just search in Google for "choropleth map for states in D3" (without the quotes)