Question

我试图根据＆＃39; d.lon＆＃39;有条件地为这些voronoi片段着色。值。如果它是正面的，我希望它是绿色的，如果它是负面的，我希望它是红色的。但是目前它将每个细分市场都恢复为绿色。

即使我交换了我的＆lt;操作数为＆gt;，它仍然返回绿色。

谢谢：）

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，因此三元运算符被评估为false，这会给你“绿色”。

检查一下：

var d = {};

console.log(d.lon < 0 ? "red" : "green");

这也解释了你说的话：

即使我交换了我的＆lt;操作数为＆gt;，它仍然返回绿色。

由于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会说“它不起作用！”）。

有条不紊地填充/颜色voronoi段

1 个答案: