色領域

Question

私は外部のJSONファイル内のいくつかのモックデータに基づいて、オランダの12州のD3でマップを作成し、それらを色付けしようとしています：

[{"_id":"Groningen","value":52}, 
{"_id":"Friesland","value":18}, 
{"_id":"Drenthe","value":87}, 
{"_id":"Overijssel","value":93}, 
{"_id":"Flevoland","value":60}, 
{"_id":"Gelderland","value":7}, 
{"_id":"Utrecht","value":26}, 
{"_id":"Noord-Holland","value":52}, 
{"_id":"Zuid-Holland","value":72}, 
{"_id":"Zeeland","value":41}, 
{"_id":"Noord-Brabant","value":78}, 
{"_id":"Limburg","value":19}] 

これはこれまでのコードです。それは成功した彼らは（ofcourseの愚かである）州名の長さの関数として各県をマッピングするが、今の色を生成：

var width = 960, 
height = 500, 
centered; 

// Define color scale 
var color = d3.scaleLinear() 
    .domain([1, 20]) 
    .clamp(true) 
    .range(['steelblue', "yellow"]); 

var projection = d3.geoMercator() 
    .scale(5500) 
    .center([6, 52.1]) 
    .translate([width/2, height/2]); 

var path = d3.geoPath() 
    .projection(projection); 

// Set svg width & height 
var svg = d3.select('svg') 
    .attr('width', width) 
    .attr('height', height); 

// Add background 
svg.append('rect') 
    .attr('class', 'background') 
    .attr('width', width) 
    .attr('height', height) 

var g = svg.append('g'); 

var effectLayer = g.append('g') 
    .classed('effect-layer', true); 

var mapLayer = g.append('g') 
    .classed('map-layer', true); 

// Load map data 
d3.json('data/provincesNL2.json', function(error, mapData) { 
    var features = mapData.features; 

    // Draw each province as a path 
    mapLayer.selectAll('path') 
     .data(features) 
     .enter().append('path') 
     .attr('d', path) 
     .attr('vector-effect', 'non-scaling-stroke') 
     .attr('fill', fillFn) 
}); 

// Get province name 
function nameFn(d){ 
    return d && d.properties ? d.properties.PROVINCIE : null; 
} 

// Get province name length 
function nameLength(d){ 
    var n = nameFn(d); 
    return n ? n.length : 0; 
} 

// Get province color 
function fillFn(d){ 
    return color(nameLength(d)); 
}; 

私はちょうどにJSONファイルから値を実装する方法がわかりませんカラースケールに沿った各州の色を表します。私はjavascriptで経験していないと私はこれはあまりにも難しいはずはないと思ったが、私はそれを把握することはできません。助けてくれてありがとう！

Answer 1

これを行う方法はいくつかありますが、d3.mapを使用する方法があります。これにより、マップ内の値をmap.get(key)でルックアップすることができます。

arrayがあなたのデータ配列で、 keyが識別子として使用できるデータ配列内の各アイテムのいくつかのプロパティです

var lookup = d3.map(array, function(d) { return d.key; })

：

一般的には、のようなルックスを設定します。値を検索するには、使用することができます：

値が特定値/キーです

lookup.get(value)

を - これはデータ配列にあった全体のオブジェクトを返します。あなたは要素の原点からの識別値/キーを取得することができますマップを色に

var lookup = d3.map(data, function(d) { return d._id; }); 

lookup.get("Drenthe") // {"_id":"Drenthe","value":87} 

：あなたのデータについては、これは、次のようになります。ここにあなたのデータを色付けするために使用さd3.mapの作業例です：

var color = d3.scaleLinear() 
 
    .domain([0,100]) 
 
    .range(["orange", "steelblue"]) 
 

 
var data = [{"_id":"Groningen","value":52}, 
 
{"_id":"Friesland","value":18}, 
 
{"_id":"Drenthe","value":87}, 
 
{"_id":"Overijssel","value":93}, 
 
{"_id":"Flevoland","value":60}, 
 
{"_id":"Gelderland","value":7}, 
 
{"_id":"Utrecht","value":26}, 
 
{"_id":"Noord-Holland","value":52}, 
 
{"_id":"Zuid-Holland","value":72}, 
 
{"_id":"Zeeland","value":41}, 
 
{"_id":"Noord-Brabant","value":78}, 
 
{"_id":"Limburg","value":19}]; 
 

 
var lookup = d3.map(data, function(d) { return d._id; }); 
 

 
// test a value: 
 
console.log(lookup.get("Drenthe").value); 
 

 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width",400) 
 
    .attr("height",100); 
 
    
 
var squares = svg.selectAll("rect") 
 
    .data(data) 
 
    .enter() 
 
    .append("rect") 
 
    .attr("fill",function(d) { return color(lookup.get(d._id).value) }) 
 
    .attr("x", function(d,i) { return i * 20; }) 
 
    .attr("y", 40) 
 
    .attr("width",16) 
 
    .attr("height",16);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

Answer 2

データオブジェクトの最小値と最大値を使用して、カラースケールのドメインを指定する必要があります。 fill属性のコールバック関数で

var colour = d3.scaleLinear() 
    .domain([ 
    d3.min(dataObject, function(d) { return d.value }), 
    d3.max(dataObject, function(d) { return d.value }) 
    ]) 
    .clamp(true) 
    .range(['steelblue', "yellow"]); 

、あなたは（あなたがそれをさまざまな方法を行うことができ、データ構造に依存）現在の州の値を検索し、colour関数に渡す必要があります。

.attr("fill", function(d, i) { 
    var value = // here you should get for current data item ; 

    return colour(value); // use this value for colour scale 
}) 

オランダマップのチェックthis example（私は一例であり、ハードコードさtopojsonオブジェクトを簡素化するために、少し自分のデータを修正）。