有条件地填充 voronoi 段/颜色

我正在尝试根据“d.lon”值有条件地为这些 voronoi 段着色。如果是正数，我希望它是绿色的，如果是负数，我希望它是红色的。然而目前它正在将每个段返回为绿色。

即使我将 ，它仍然返回绿色。

活生生的例子在这里：https://allaffects.com/world/ 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 EDIT

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)
});

这就是发生的事情：您的行函数正在修改以下对象rows大批。当您到达填充多边形的函数时，没有d.lon不再，并且自从d.lon is undefined三元运算符的计算结果为false，这给你“绿色”。

检查一下：

var d = {};

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

这也解释了你所说的：

即使我将 ，它仍然返回绿色。

Because 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会说“这不起作用！”).