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说“它不工作！”）结束。