보로 노이 폴리곤 위로 가져갈 때 정보 표시 (D3.js에서)

Question

보로 노이 지역과 관련된 도시 이름과 인구를 표시하고 싶습니다. 그러나 보 로노이 영역을 어떻게 만들었는지에 따라 좌표 데이터를 보내고 모든 도면을 작동 시키거나 더 많은 데이터를 보내야하며 보로 노이 영역 중 어느 것도 그려지지 않았습니다 (b/c, 좌표 데이터 및 적어도 배열 또는 개체 내에서 지정하는 방법을 모르겠다면, voronois를 만들 때). 툴팁에 대한 정적 데이터 또는 관련성없는 데이터를 입력 할 수 있습니다 (아래에서 설명했듯이).하지만 실제 데이터 셋의 데이터는 입력 할 수 없습니다.

var tooltip = d3.select("body") 
    .append("div") 
    .style("position", "absolute") 
    .style("z-index", "10") 
    .style("visibility", "hidden") 
    .text("a simple tooltip"); 

var voronoi = d3.geom.voronoi() 
     .clipExtent([[0, 0], [w, h]]); 

d3.csv("us-cities1.csv", function(d) { 
    return [projection([+d.lon, +d.lat])[0], projection([+d.lon, +d.lat])[1]]; 
     }, function(error, rows) { 
      vertices = rows; 
      drawV(vertices); 
      } 
     ); 

function polygon(d) { 
     return "M" + d.join("L") + "Z"; 
} 

function drawV(d) { 
    svg.append("g") 
     .selectAll("path") 
     .data(voronoi(d), polygon) 
    .enter().append("path") 
     .attr("class", "test") 
     .attr("d", polygon) 
     .attr("id", function(d, i){return i;}) 
     .on("mouseover", function(){return tooltip.style("visibility", "visible");}) 
     .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px").text((this).id);}) 
     .on("mouseout", function(){return tooltip.style("visibility", "hidden");}); 

    svg.selectAll("circle") 
     .data(d) 
    .enter().append("circle") 
     .attr("class", "city") 
     .attr("transform", function(d) { return "translate(" + d + ")"; }) 
     .attr("r", 2); 
     } 

Answer 1

데이터를 사용하여 Lars가 언급 한 것을 보여주는 예제를 작성했습니다.

var voronoi = d3.geom.voronoi() 
    .x(function(d) { return (d.coords[0]); }) 
    .y(function(d) { return (d.coords[1]); }); 

마이크에 의해이 Bl.ock에서 찍은 :이 같은 보로 노이에 대한 변수를 만들었습니다. 이렇게하면 좌표 배열을 지정하고 표시 할 설명 데이터에 연결되도록 할 수 있습니다. 난 그냥 다음 voronio 변수에 좌표 변환을 지정 있었다

cities.forEach(function (d,i) { 
    var element = { 
      coords: projection([+d.lon, +d.lat]), 
      place: d.place, 
      rank: d.rank, 
      population: d.population 
     }; 
    locCities.push(element); 
}); 

:

은 그때 사용 Voronio 다각형에 사용될 수있는 형식으로 모든 데이터를 저장하는 객체를 생성 변수는 cities이지만 사용하지 않았습니다.

제목 특성이 툴팁에 사용되었지만 코드에있는 것과 같이 더 적절한 것으로 대체 될 수 있습니다. 관련 코드 :

.append("title") // using titles instead of tooltips 
    .text(function (d,i) { return d.point.place + " ranked " + d.point.rank; }); 

데이터에 몇 가지 문제가 있습니다. geojson을 올바르게 렌더링하려면 d3 (3.1.5)의 이전 버전을 사용해야했습니다. Alberaua 프로젝션에 많은 수의 chnanges가 있었으므로 거기에 문제가 있음을주의하십시오.

일부 도시의 위치가 잘못되었습니다. 예를 들어 San Fancisco가 플로리다 어딘가에 나타납니다 (이로 인해 다소 혼란 스러웠습니다). 그래서 원래의 CSV 파일을 확인하고 거기에 좌표가 틀린 것처럼 보입니다. 그리고 데이터는 어디에서 렌더링되어야하는지 (레이블에 따라 예상되는 위치가 아님) 렌더링됩니다.

이제 모두 함께 넣어 당신은 here