Question

使用Javascript和d3库我已经制作了英国选区（不包括NI）的地图，并添加了选择每个选区颜色的功能。我现在希望计算每种颜色的选区数量，并将它们显示在条形图上。选区数据来自topojson文件。

有人可以告诉我如何做到这一点。非常感谢

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        /* define style for map */
        .constituency {
            fill:   black;
            stroke: #fff;
            stroke-width: 0.25px;
        }
//      .constituency.W28 { fill: red; }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://d3js.org/topojson.v1.min.js"></script>
        <script>

// create map
var width = 700,
height = 1000;


var projection = d3.geo.albers()
    //.center([0, 55.4])
    .center([3, 54])
    .rotate([4.4, 0])
    .parallels([50, 60])
    .scale(4000)
    .translate([width / 2, height / 2])
    //.translate(200,200)
    ;

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

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().on('zoom', redraw))
    .call(d3.behavior.zoom().on("dblclick.zoom", null)
     ;
function redraw() {
    svg.attr('transform', 'translate(' + d3.event.translate + ') scale(' + d3.event.scale + ')');
}
var currentColor = "black";
var toggleColor = (function(){
  var i=0;
  var Colors = ["black","rgba(5, 117, 201, 1)", "rgba(237, 30, 14, 1)", "rgba(254, 131, 0, 1)", "rgba(235, 195, 28, 1)", "rgba(113, 47, 135, 1)", "rgba(120, 195, 30, 1)","rgba(78, 159, 47, 1)"];


  return function(){
    i=0;
   if(currentColor != "rgba(120, 195, 30, 1)"){
        while(currentColor != Colors[i]){
                i++;
                }
        currentColor = Colors[i+1];
         }
    else{
        currentColor  = "black";
        }

//       currentColor = currentColor == "rgba(5, 117, 201, 1)" ? "rgba(237, 30, 14, 1)" : "rgba(5, 117, 201, 1)";
        d3.select(this).style("fill", currentColor);
    }
})();

d3.json("constituencies.topo.json", function(error, topology) {
    // create a polygon for every constituency
    svg.selectAll(".constituency")
        // retrieve the features so that we can access the id
        .data(topojson.feature(topology, topology.objects.constituencies).features)
        .enter().append("path")
        .attr("class", function(d) { return "constituency " + d.id; })
        .attr("d", path)
        .style("fill", "black")
       .on("click", toggleColor)
});

        </script>
    </body>
</html>

Answer 1

保存对使用topojson创建的选区的引用：

var constituencies = topojson.feature(topology, topology.objects.constituencies).features
svg.selectAll(".constituency")
    .data(constituencies).features)
    .enter().append("path")
...

然后调整click函数以使用当前颜色更新DOM和绑定到该元素的选区：

return function(d){
  i = 0;
  if (currentColor != "rgba(120, 195, 30, 1)"){
    while(currentColor != Colors[i]) i++;
    currentColor = Colors[i+1];
  } else{ currentColor  = "black"; }

  d3.select(this).style("fill", currentColor);
  d.currentColor = currentColor; // save currentColor
}

现在，您可以按颜色对选区进行分组，并将该信息用于条形图：

 var byColor = d3.nest().key(d => d.currentColor).entries(constituencies)

使用d3计算所选元素

1 个答案: