선택한 요소를 d3으로 계산합니다.

자바 스크립트와 d3 라이브러리를 사용하여 영국 (NI 제외)에서 선거구의지도를 만들고 각 선거구의 색을 선택할 수있는 기능을 추가했습니다. 나는 이제 각 색의 선거구의 수를 세어 막 대형 차트에 표시하기를 바라고있다. constituency 데이터는 topojson 파일에서 가져옵니다.선택한 요소를 d3으로 계산합니다.

다른 사람이 어떻게하는지 알려 줄 수 있습니까?

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

는 그 다음 DOM 및 현재의 색으로 해당 요소에 바인딩 된 선거구 모두를 업데이트 클릭 기능을 조정할 : 많은 감사

<!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로 만든 선거 구민에 대한 참조를 저장 : 이제

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()를 사용하여 다시 추가하거나 selection.merge를 사용하십시오. https://bl.ocks.org/mbostock/3808218 –

선택한 요소를 d3으로 계산합니다.

답변

관련 문제