2017-01-17 18 views
0

私はIDとしてFIPSコードで、次のTSVを設定している、と私はサンプル1、サンプル2に基づいて色の郡にしたい、そしてサンプル1とサンプル2との間で共有:D3.js色

id  Sample1  Sample2 
    1031 1   0 
    1032 1   0 
    1033 1   1 

これまでのところ、私はSample1またはSample2に基づいて郡を記入することができますが、一緒には記入することはできません。ここに私のコードです:

var rateById = d3.map(); 
var quantize = d3.scale.quantize() 
    .domain([1, 1000]) 
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; })); 
var projection = d3.geo.albersUsa() 
    .scale(3960) 
    .translate([width/2, height/2]); 
var path = d3.geo.path() 
    .projection(projection); 
var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 
queue() 
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json") 
    .defer(d3.tsv, "Example.tsv", function(d) { rateById.set(d.id, +d.Sample1); }) 
    .await(ready); 
function ready(error, us) { 
    if (error) throw error; 
    svg.append("g") 
     .attr("class", "counties") 
    .selectAll("path") 
     .data(topojson.feature(us, us.objects.counties).features) 
    .enter().append("path") 
    .attr("class", function(d) { return quantize(rateById.get(d.id)); }) 
    .attr("d", path); 
    svg.append("path") 
     .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) 
     .attr("class", "states") 
     .attr("d", path); 
} 
d3.select(self.frameElement).style("height", height + "px"); 

どうすればいいですか?ここで

+1

あなたの色は1から1000までの値に基づいています。組み合わせた色はどのように見えますか?数字を追加しますか?各値の状態の半分をシェードしますか?両方の色を不透明にして、「表示」するようにしますか? – Mark

答えて

0

が、私はこれを解決することになった方法です:

.defer(d3.tsv, "Example.tsv", function(d) { 
    if (d.Sample1 > 0 && d.Sample2 > 0) d.color = "saddlebrown"; 
    else if (d.Sample1 > 0) d.color = "green"; 
    else if (d.Sample2 > 0) d.color = "mediumpurple"; 
    else d.color = "lightgrey"; 
    rateById.set(d.id, d.color); 
}) 

これは、サンプル1とサンプル2は、その値に基づいて、現在と色の両方であるかどうかを比較します。 It produces this map like I want.