如何基於在d3.js

我已經被這個問題卡住了最後兩天，它的時候了，我要問的某些價值增添色彩Voronoi圖...如何基於在d3.js

基本上，我已經成功地繪製基於.csv文件在地圖上Voronoi圖是這樣的：

salaryLevel, lat, lon 
-0.263031898 -1.957862 30.058205 
-0.263031898 -1.960236 30.018172 
0.510327701 -1.979509 30.044363 
0.510327701 -1.919366 30.046766 
0.510327701 -1.900015 30.034252 
0.510327701 -1.926512 30.08714 
-0.263031898 -1.923729 30.072793 
0.510327701 -1.938892 30.07126 
0.510327701 -1.950085 30.079418

現在，我嘗試添加顏色基於工資水平的值如上圖所示的地圖的每個部分。所以基本上在-1-0之間的薪水水平，使用藍色，0-0.5之間，使用綠色，類似的東西。這裏是我現在的代碼：

var vertices = salary.map(function(d) { return [+d.lon, +d.lat]; }); 
    var median = salary.forEach(function(d) { d.median = +d.salaryLevel; }); 
    var voronoi = d3.geom.voronoi() 
     .clipExtent([0, 0], [width, height]); 

    var max = d3.max(median, function(d) { return d; }); 
    var min = d3.min(median, function(d) { return d; }); 
    var color = d3.scale.quantize().domain([min, max]).range([0, 0.1, 0.3]); 

    layer4.selectAll("path") 
    .data(voronoi(vertices)) 
    .enter().append("svg:path") 
    .classed("voronoi", true) 
    .attr("d", function(d) { return "M" + d.map(function(d) { return projection([d[0], d[1]]); }).join("L") + "Z"; });

我沒有找到解決方案的最後兩天，有人可以幫我嗎？非常感謝！

來源

2014-12-04 user3639203

*「...我正在嘗試添加顏色...」 - - 在代碼中看不到任何證據。你試過什麼了？ *「...如圖所示。」* - 什麼圖片？ – 2014-12-04 21:19:43

@squeamishossifrage我無法發佈圖片，所以我粘貼了.csv。我編輯了上面的代碼。我試圖按照0,0.1,0.3和相應的添加顏色來劃分工資水平。我現在的問題是將薪水水平與座標進行匹配。我是d3.js的新手，想知道這是否有效？或者有更好的解決方案？謝謝！ – user3639203 2014-12-04 21:50:11

這是一個.tsv文件，夥計。 – Noobster 2017-05-27 09:44:03

下面是將顏色添加到voronoi圖中的示例。基本上你會創建三個css類與3種不同顏色的填充值。

然後做類似他們在重繪（）函數，除非他們做了簡單的模數來選擇顏色做什麼，你就做一個測試，看看你的範圍內的數據值下降英寸

http://bl.ocks.org/mbostock/4060366

來源

2014-12-05 03:18:15

如何基於在d3.js

回答

相關問題