voronoi分段的條件填充/顏色

Question

我試圖根據'd.lon'值有條件地爲這些voronoi分段着色。如果它是正面的，我希望它是綠色的，如果它是負面的，我希望它是紅色的。然而，目前它將每個細分都歸爲綠色。

即使我將我的<操作數替換爲>，它仍會返回綠色。

活生生的例子在這裏：https://allaffects.com/world/

謝謝:)

JS

// Stating variables 
var margin = {top: 20, right: 40, bottom: 30, left: 45}, 
width = parseInt(window.innerWidth) - margin.left - margin.right; 
height = (width * .5) - 10; 

var projection = d3.geo.mercator() 
.center([0, 5 ]) 
.scale(200) 
.rotate([0,0]); 

var svg = d3.select("body").append("svg") 
.attr("width", width) 
.attr("height", height); 

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

var voronoi = d3.geom.voronoi() 
.x(function(d) { return d.x; }) 
.y(function(d) { return d.y; }) 
.clipExtent([[0, 0], [width, height]]); 

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

// Map data 
d3.json("/world-110m2.json", function(error, topology) { 

// Cities data 
d3.csv("/cities.csv", function(error, data) { 
g.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("a") 
       .attr("xlink:href", function(d) { 
        return "https://www.google.com/search?q="+d.city;} 
      ) 
    .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", 5) 
    .style("fill", "red"); 

}); 

g.selectAll("path") 
    .data(topojson.object(topology, topology.objects.countries) 
     .geometries) 
.enter() 
    .append("path") 
    .attr("d", path) 
}); 

var voronoi = d3.geom.voronoi() 
     .clipExtent([[0, 0], [width, height]]); 

    d3.csv("/cities.csv", function(d) { 
    return [projection([+d.lon, +d.lat])[0], projection([+d.lon, +d.lat]) [1]]; 
    }, function(error, rows) { 
    vertices = rows; 
     console.log(vertices); 
     drawV(vertices); 
    } 
); 

     function polygon(d) { 
      return "M" + d.join("L") + "Z"; 
     } 

     function drawV(d) { 
      svg.append("g") 
      .selectAll("path") 
      .data(voronoi(d), polygon) 
      .enter().append("path") 
      .attr("class", "test") 
      .attr("d", polygon) 

// This is the line I'm trying to get to conditionally fill the segment. 
      .style("fill", function(d) { return (d.lon < 0 ? "red" : "green" );}) 
      .style('opacity', .7) 
      .style('stroke', "pink") 
      .style("stroke-width", 3); 
     } 

JS編輯

d3.csv("/static/cities.csv", function(data) { 
    var rows = []; 
    data.forEach(function(d){ 
     //Added third item into my array to test against for color 
     rows.push([projection([+d.lon, +d.lat])[0], projection([+d.lon, +d.lat]) [1], [+d.lon]]) 
    }); 

    console.log(rows); // data for polygons and lon value 
    console.log(data); // data containing raw csv info (both successfully log) 

    svg.append("g") 
    .selectAll("path") 
    .data(voronoi(rows), polygon) 
    .enter().append("path") 
    .attr("d", polygon) 
    //Trying to access the third item in array for each polygon which contains the lon value to test 
    .style("fill", function(data) { return (rows[2] < 0 ? "red" : "green");}) 
    .style('opacity', .7) 
    .style('stroke', "pink") 
    .style("stroke-width", 3) 
}); 

Answer 1

這是什麼發生：您的行功能正在修改rows陣列的對象。當你到達填充多邊形的函數時，不再有d.lon，並且因爲d.lon是undefined，所以三元運算符被評估爲false，它給你「綠色」。

檢查：

var d = {}; 
 

 
console.log(d.lon < 0 ? "red" : "green");

這也解釋了你說的話：

即使我換我<操作數>，它仍然會返回綠色。

因爲d.lon是未定義的，所以使用什麼操作符並不重要。

這就是說，你必須保持你的原始rows結構，與lon屬性的對象。

一個解決方案是擺脫排功能...

d3.csv("cities.csv", function(data){ 
    //the rest of the code 
}) 

...和創建回調裏面你rows陣列：

var rows = []; 
data.forEach(function(d){ 
    rows.push([projection([+d.lon, +d.lat])[0], projection([+d.lon, +d.lat]) [1]]) 
}); 

現在你有兩個數組：rows，您可以使用它來創建多邊形，就像您現在使用的那樣; data，其中包含lon值。

或者，您可以將所有內容保存在一個數組中（僅更改行功能），這是最好的解決方案，因爲它可以更容易地在多邊形的輸入選擇內獲取d.lon值。然而，如果沒有使用實際的代碼進行測試，很難提供一個可行的答案（它通常以OP說「它不工作！」）結束。