条件付きでボロノイセグメントの塗りつぶし/塗りつぶし

Question

「d.lon」値に基づいてこれらのボロノイセグメントを条件付きでカラーリングしようとしています。もしそれが陽性なら、私はそれを緑色にしたい、陰性ならそれを赤色にしたい。しかし、現時点ではすべてのセグメントを緑色に戻しています。

<オペランドを>にスワップしても、それでも緑色を返します。

ここに住ん例：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) 
}); 

Answer 1

これは何です起こっている：あなたの行機能はrows配列のオブジェクトを変更しています。ポリゴンを塗りつぶすための関数を取得した時点では、d.lonはなくなり、d.lonはundefinedであるため、3次演算子は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を、今使用しているのと同じようにポリゴンを作成できます。 lonの値を含む dataです。

また、ポリゴンの入力選択内にd.lonの値を取り込むのが簡単になるため、すべての値を1つの配列に保持することができます（行機能を変更するだけです）。しかし、実際のコードでテストすることなく、実際の回答を提供するのは難しいです（通常は、OPで終わります。"それは機能していません！"）。