使用d3计算所选元素

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

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

<!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>

来源

2017-05-04 Hanros94

保存到您与topojson创建选区的引用：

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

然后捏捏点击功能同时更新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)

来源

2017-05-06 22:39:56

非常感谢亚当，我偶然以同样的方式工作，但感谢您的帮助。我可以请你看看我的另一个问题，继续这段代码，我有一个HTML条形图，列出所有彩色选区的数组，但是在选择颜色后似乎没有重新绘制 – Hanros94

请确保你实际上将更新的数据附加到条上。要么删除所有现有的栏，并使用.data（byColor）.enter（）再次添加它们或使用选择.merge https://bl.ocks.org/mbostock/3808218 –

使用d3计算所选元素

回答

相关问题