문제

주 경로가 포함 된 Topojson이 있습니다.나는 사용자가 상태 위로 마우스를 가져갈 수 있고 다른 SVG에 나타나는 상태를 원합니다.지금까지, 나는 Topojson (d.geometry, d.geometry.coordinates 등)에서 기하학을 추출하려고 노력했지만, 나는 그것을 할 수 없다. 어쩌면 나는 다각형을 그릴 필요가 있지만 일부 주는 "다각형"유형이며 일부는 "다중 폴리온"유형입니다.

어떤 아이디어 / 제안?

편집 : 여기에 내 코드가 있습니다

var svg = d3.select("#india-map")
.append("svg")
.attr("width",width).attr("preserveAspectRatio", "xMidYMid")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("height", height)

var stateSvg = d3.select("#state-map")
.append("svg")
.append("g")
.attr("height", height)
.attr("width", width);


var g = svg.append("g");

var projection = d3.geo.mercator()
  .center([86, 27])
  .scale(1200);

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

var pc_geojson = topojson.feature(pc, pc.objects.india_pc_2014);
var st_geojson = topojson.feature(state_json, state_json.objects.india_state_2014);

g.selectAll(".pc")
    .data(pc_geojson.features)
    .enter().append("path")
    .attr("class", "pc")
    .attr("d", path)
    .attr("id", function(d){ return d.properties.Constituency;})
    .attr("fill", "orange")
    .on("click", function(d){
        drawCons(d);
    });

function drawCons(d){
 stateSvg.selectAll(".pc2")
   .data(d)
   .enter().append("path")
   .attr("class","pc2")
   .attr("d", path)
}
.

도움이 되었습니까?

해결책

.data()는 선택과 일치 할 객체의 배열을 제공 할 것으로 예상합니다.단일 개체를 전달하므로 작동하지 않습니다..datum(d) 또는 .data([d])를 사용하여 작동하도록하십시오.

빠르고 더러운 데모 여기 .

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top