D3 : json 데이터에서 경로를 선택하는 데 문제가 있습니다.

많은 질문과 답변을 읽었음에도 불구하고 외부 json 파일의 경로에 ID를 할당하는 데 문제가 있습니다.D3 : json 데이터에서 경로를 선택하는 데 문제가 있습니다.

var neighborhoods_json = { 
"type": "FeatureCollection",                     
"features": [ 
{ "type": "Feature", "properties": { "Name": "Roslindale", "density": 5.5800 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -71.1259, 42.2720 ], [ -71.1257, 42.2723 ], [ -71.1256, 42.2724 ], [ -71.1255, 42.2725 ],....

내가 본 다른 사람들이 같은 질문을하고 대답은 추가이 줄을이었다 : 파일의 데이터는 다음과 같습니다 (그것은 또한 내 HTML의 헤더에 참조 된 것, 아래 참조)

.attr("id", function(d) {return d.id;})

하지만 내 json 데이터는 id를 포함하지 않는, 그래서 내가 대신 Name 사용하는 거라고 생각 : 각 경로에 대한 ID를 생성

.attr("id", function(d) {return d.Name;})

그런 다음 Name을 id으로 사용하여 생성 된 경로 중 하나를 선택하려고했습니다. 아이디어는 간단히 경로 중 하나를 선택하고 채우기 색상을 빨간색으로 변경하는 것입니다. 하지만 ID를 올바르게 지정하지 않았거나 경로를 올바르게 선택하지 않았습니다. 아무도 내가 뭘 잘못하고 있다고 말할 수 있습니까? 당신에

<script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="http://maptimeboston.github.io/d3-maptime/example3/neighborhoods.js"></script> 
</head> 
<body> 
    <script> 
     var width = 700, 
      height = 580; 

     var svg = d3.select("body") 
      .append("svg") 
      .attr("width", width) 
      .attr("height", height); 

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

     var albersProjection = d3.geo.albers() 
      .scale(190000) 
      .rotate([71.057,0]) 
      .center([0, 42.313]) 
      .translate([width/2,height/2]); 

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

     neighborhoods.selectAll("path") 
      .data(neighborhoods_json.features) 
      .enter() 
      .append("path") 
      .attr("d", geoPath) 
      .attr("id", function(d) {return d.Name;}) 
      .attr("fill", "steelblue"); 

     neighborhoods.select("path#Roslindale") 
      .attr("fill", "red"); 

    </script>

출처

2016-07-28 FrankJ

는 id 함수 Name 속성은

neighborhoods.selectAll("path") 
      .data(neighborhoods_json.features) 
      .enter() 
      .append("path") 
      .attr("d", geoPath) 
      .attr("id", function(d) {return d.properties.Name;}) 
      .attr("fill", "steelblue");

Working jsfiddle

출처

2016-07-28 03:49:29

너무 감사 properties 건물 내부에 중첩됩니다! 이것은 큰 도움이되었습니다. 나는 아직도 배우고있다. – FrankJ

D3 : json 데이터에서 경로를 선택하는 데 문제가 있습니다.

답변

관련 문제