此代码的作用是使用g.selectAll（＆＃34; path）创建地图投影...然后将小圆圈分配给相关国家/地区的周界。我希望能够做的是在html文件中创建按钮，按下后将选择＆＃34; /＆＃34;取消选择＆＃34;或者对圈子和/或相关国家进行着色/取色。基本上我希望能够选择国家和圈子的颜色。我知道如何创建按钮并引用它们等等，用它们调用函数。我的挂断是我不知道如何让svg或g元素重绘或重新更新画布。如果我调试，它会显示调用堆栈不会多次进入g.selectAll，即使该方法执行多次。第一次写js，原谅任何不一致或粗略的代码大纲。谢谢！
var svg = d3.select("#container").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
//Create secondary layer to canvas SVG
var g = svg.append("g");
function buildMap() {
d3.json("countries.geo.json", function(json) {
d3.csv("Map_of_the_Gods.csv", function(data) {
// Go through each element of the csv
for (var i = 0; i < data.length; i++) {
// Get data for csv element
var csvName = data[i].name;
var csvCulture = data[i].culture;
var csvLocation = data[i].location;
var csvGender = data[i].gender;
var csvSpecies = data[i].species;
var csvType = data[i].type;
var csvWikiLink = data[i].linkwik;
var csvGCLink = data[i].linkgc;
var csvPicture = data[i].picture;
// Go through each element of the json looking for a country
// to match the country of the csv.
for (var j = 0; j < json.features.length; j++) {
var jsonCountry = json.features[j].properties.name;
//console.log(jsonCountry);
//console.log(j);
if (csvLocation == jsonCountry) {
// Assign the color retrieved from the csv to the
// matching json element.
json.features[j].properties.Name = csvName;
json.features[j].properties.Culture = csvCulture;
json.features[j].properties.Location = csvLocation;
json.features[j].properties.Gender = csvGender;
json.features[j].properties.Species = csvSpecies;
json.features[j].properties.Type = csvType;
json.features[j].properties.WikiLink = csvWikiLink;
json.features[j].properties.Picture = csvPicture;
json.features[j].properties.initialColor = 1;
break;
}//if(csvLocation == jsonCountry
}//for loop
}//outer for loop
g.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
var country = d.properties.Location;
var colorChange = d.properties.initialColor;
if( country === "Mexico") {
console.log("yo");
return "#410d66";}//purple
if(country === "Greece") {
return "#000072";}//aqua
if(country === "Japan") {
return "#c90e0e";}//red
if(country === "United Kingdom") {
return "#194719";}
if(country === "Ireland") {
return "#194719";}//green
if(country === "Nigeria") {
return "#ff9900";}//light brown
if(country === "Peru") {
return "#85ad33";}//green yellow
if(country === "Egypt") {
return "#ff5050";}//salmony
if(country === "Denmark") {
return "#75A3A3";}//bluegrey
if(country === "Finland") {
return "#75A3A3";}
if(country === "Norway") {
return "#75A3A3";}
if(country === "Sweden") {
return "#75A3A3";}
else {
return "grey";}
});//This is for the stlye attribute for the path
// g.selectAll("circle").remove();
//We will now create all of the circles and Gods
g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.lon,d.lat])[0];})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];})
.attr("r", 3)
.style("fill", function(d) {
var typeOfGod = d.type;
if(typeOfGod === "Storm" ) {
return "yellow";}
else if(typeOfGod ==="Sky"){
return "#87CEFA";}
else if(typeOfGod === "Death" || typeOfGod ==="Chaos") {
return "black";}
else if(typeOfGod === "Agriculture") {
return "#006300";}
else if(typeOfGod === "Motherhood") {
return "#99FF99";}
else if(typeOfGod === "War" ) {
return "#9e0e0e";}
else if(typeOfGod === "Moon") {
return "white";}
else if(typeOfGod === "Sun") {
return "orange";}
else if(typeOfGod === "Love") {
return "#ff99ff";}
else if(typeOfGod === "Wisdom") {
return "#9900ff";}
else if(typeOfGod === "Sea") {
return "blue";}
else{
return "grey";}
})//These brackets match to the style for circles and end the selectALL()
.on('mouseover', function(d) {
tooltip.transition()
.duration(400)
.style("opacity", 0);
tooltip.transition()
.duration(100)
.style("fill", "black")
.style("opacity", ".9");
tooltip.html("<img src = " + d.picture+">" + "<br>" + "Name: " + d.name + "<br>"
+ "Type: " + d.type + "<br>"
+ "Culture: " + d.culture + "<br>" + "Region: " + d.location + "<br>"
+ "Gender: " + d.gender + "<br>" + "Species: " + d.species + "<br>" +
'<a href = "' + d.linkwik + '">' + "Wikipedia" + "</a>" + "<br>"
+ '<a href = "' + d.linkgc + '">' +"GodChecker" + "</a>")
.style("left", (d3.event.pageX ) + "px")
.style("top", (d3.event.pageY) + "px")});
});//These bracets are for d3.csv line above
});//These brackets are for d3.json line
//THis is the bracket for the function countriesSelect