路徑填充顏色

編碼器，我是新來的D3和JSON。我想創建一個簡單的地圖投影，可以確定每個國家在csv文件中保存的人口。

我已經創建了地圖投影，現在我股票如何填寫基於我的csv文件人口的國家幾乎每週..

在這下面的代碼可識別的最高或最低通過使用圓圈的世界人口，但我不喜歡使用圓圈，因爲它可以相互重疊，我想要的全部是綠色，藍色或紅色的紅色是最高的，綠色的是最低的。

這是我的樣品csv文件

國家，人口，緯度，經度菲律賓，10，13，122 CANADA，2000，60，-95 JAPAN，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>

有什麼絕招，可以幫助我關於這個問題。

謝謝

來源

2013-10-25 CyberDaemon

從我所瞭解的你想要爲不同國家的不同顏色着色。要做到這一點，最簡單的方法是創建一個色標與內置的D3色階，所以更換這行：

var color = d3.scale.threshold()

與此

var color = d3.scale.category10()

的文檔可以發現here

然後你只需要用它來設置最後一行的適當國家。這從基於索引（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-25 09:05:18 user1614080

我認爲最後一部分應爲以下（含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-04 16:27:38

這個答案沒有回答這個問題;相反，它是[這個答案]（http://stackoverflow.com/a/19585583/2038264）的一條評論，此後已被更正。 – congusbongus

路徑填充顏色

回答

相關問題