3

再会，

编码员，我是 d3 和 json 的新手。我想创建一个简单的地图投影，以识别保存在 csv 文件中的每个国家/地区的人口。

我已经创建了地图投影，现在我有将近一周的时间来了解如何根据我的 csv 文件中的人口填充这个国家。

在下面的代码中，它可以通过使用圆圈来识别世界上最高或最低的人口，但我不喜欢仅仅因为它可以相互重叠而使用圆圈，我只想用绿色、蓝色或红色填充这个国家最高，绿色最低。

这是我的示例 csv 文件

国家、人口、纬度、经度 菲律宾,10, 13, 122 加拿大, 2000, 60, -95 日本, 500, 36, 138 阿富汗, 200, 33, 65 中国, 2000, 35, 105

这是我的代码

<!DOCTYPE html>
<meta charset="utf-8">
 <style>

path {
  fill: silver;
}

div.tooltip {   
   position: absolute;           
   text-align: center;           
   width: 140px;                  
   height: 45px;                 
   padding: 2px;             
 font: 12px sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
 pointer-events: none; 
 z-index:50;        
}

.overlay {
 fill: none;
 pointer-events: all;
 }

   .state {
    fill: #aaa;
   }

  .county-border,
  .state-border {
fill: none;
 stroke: #fff;
 stroke-linejoin: round;
 stroke-linecap: round;
}


 .frame {
    stroke: #333;
    fill: none;
  pointer-events: all;
  }
.feature {
    stroke: #ccc;
   }

  </style>
 <body>
 <!--<script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/topojson.v1.min.js"></script>-->
<script src="Script/d3.v3.min.js"></script>
<script src="Script/topojson/topojson.js"></script>
<script src="Script/queue-master/queue.min.js"></script>
<script>

     // <script src="http://d3js.org/d3.v2.js"></script>


     <div id="d"></div>
    <script>


     var MalwareCountry = [
     // "Australia", "Algeria",
      //"Brunei", "Cameroon",
          "Canada", "Cyprus",
         "Philippines", "Manila",
        // "United States of America", "Washington D.C",
        //"Mexico", "Mexico",
       //"New Zealand",
//"Hong Kong",
//"India",
//"Indonesia",
"China","Beijng",
"Japan", "Tokyo",
"Afghanistan"
//"Singapore",
//"South Korea",
//"Taiwan",
//"Thailand",
//"Vietnam",
//"Austria",
//"Belgium",
//"France",
//"Germany",
//"Iran",
//"Ireland",
//"Israel",
//"Italy",
//"Luxembourg",
//"Netherlands",
//"Russia",
//"Saudi Arabia",
//"Spain",
//"Switzerland",
//"Turkey",
//"United Arab Emirates",
//"United Kingdom",
//"Albania",
//"Bosnia and Herzegowina",
//"Crotia",
//"Czech Republic",
//"Hungary",
//"Denmark",
//"Finland",
//"Iceland",
//"Macedonia",
//"Montenegro",
//"Norway",
//"Poland",
//"Romania",
//"Serbia",
//"Slovenia",
//"Slovakia",
//"Sweden",
//"Bulgaria",
//"Malaysia", "Mozambique"

  ];

    var div = d3.select("div")
     .append("div")
      .attr("class", "tooltip")
       .style("opacity", .1);

var coldomain = [50, 150, 350, 750, 1500]
var extcoldomain = [10, 50, 150, 350, 750, 1500]
var legendary_labels = ["< 50", "50+", "150+", "350+", "750+", "> 1500"]
     var color = d3.scale.threshold()
       // .domain(coldomain)
        //.range(["#adfcad", "#ffcb40", "#ffba00", "#ff7d73", "#ff4e40", "#ff1300"]);



         var color = d3.scale.category20b()





   function getColorForCountry(name){
    if (MalwareCountry.indexOf(name) < 0) {
        return "#FFFFFF";
        //return "#bbb";
    }else {

        return color();
    }
}

var margin = {
    top: 0,  right: 0,
    bottom: 0,  left: 0
},
  width = 960 - margin.left - margin.right,
  height = 480 - margin.top - margin.bottom;

var projection = d3.geo.equirectangular()
    .center([0, 5])
    .scale(150)
    .translate([width / 2, height / 2])
    .rotate([0, 0])
    .precision(.9);

var path = d3.geo.path()
  .projection(projection);
var zoom = d3.behavior.zoom()
  .translate(projection.translate())
  .scale(projection.scale())
  .scaleExtent([height, 10 * height])
  .on("zoom", move);


var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .call(zoom);


var feature = svg.append("g")
  .selectAll(".feature");

svg.append("rect")
  .attr("class", "frame")
  .attr("width", width)
  .attr("height", height);


d3.json("Script/topojson/examples/worldmap-100.json", function(data) {
   feature = feature
      .data(data.features)
      .enter().append("path")
      .attr("class", "feature")
      .attr("d", path)
      .style("fill", function (d) { return getColorForCountry(d.properties.name) });
});

var g = svg.append("g");
d3.csv("data/s.csv", function (error, data) {

    var circle = g.selectAll("circle")
    .data(feature)
    .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", function (d) { return Math.sqrt(d.population) / 2 })
        .style("fill", function (d) {
            if (d.population >= 500 && d.population <= 800) {
                return "blue"
            }

            else if (d.population >= 800) {
                return "red"
            }
            else {
                return "green"
            }
        })
})

function move() {
    projection.translate(d3.event.translate).scale(d3.event.scale);
    feature.attr("d", path);
}

var legend = svg.selectAll("g.legend")
  .data(extcoldomain)
  .enter().append("g")
  .attr("class", "legend");

var ls_w = 20, ls_h = 20;

legend.append("rect")
.attr("x", 20)
.attr("y", function (d, i) { return height - (i * ls_h) - 2 * ls_h; })
.attr("width", ls_w)
.attr("height", ls_h)
.style("fill", function (d, i) { return color(d); })
.style("opacity", 0.8);

legend.append("text")
.attr("x", 50)
.attr("y", function (d, i) { return height - (i * ls_h) - ls_h - 4; })
.text(function (d, i) { return legendary_labels[i]; });

</script>

有什么技巧可以帮助我解决这个问题。

谢谢

4

2 回答 2

2

据我了解，您想为不同的国家涂上不同的颜色。最简单的方法是使用内置的 D3 色标创建色标，因此替换此行：

var color = d3.scale.threshold()

有了这个

var color = d3.scale.category10()

文档可以在这里找到

然后，您只需要使用它来设置适当国家/地区的样式，如最后一行所示。这会根据索引 (i) 从刻度中获取颜色。

feature = feature.data(data.features)
             .enter().append("path")
             .attr("class", "feature")
             .attr("d", path)
             .style("fill", function (d,i) { return color(i) });
于 2013-10-25T09:05:18.687 回答
1

我认为最后一部分应该是以下（带return）

feature = feature.data(data.features)
         .enter().append("path")
         .attr("class", "feature")
         .attr("d", path)
         .style("fill", function (d,i) { return color(i) });
于 2014-03-04T16:27:38.357 回答