업데이트 D3.js 그래프

Question

나는 D3에 새로운 해요 및

내가에 그래프를 싶습니다 (canada.json) 데이터를 표시하는지도 mbostock의 누적 막대 그래프의 예 (http://bl.ocks.org/mbostock/3886208)를 결합했다 지방의 d3.mouseover 이벤트에 업데이트 된 차트를 표시하십시오. http://gao8a.github.io/ (이와 비슷한 것)

불행히도, 축 만 표시 할 수있었습니다.

이

(이로드 ~ 3 초 소요됩니다) 여러

: http://bl.ocks.org/GAO8A/566e238a72e5ebd1e2c1

동일 축 http://bl.ocks.org/GAO8A/64f94bb494c4a73f2bf6

중복 나는 아마 필요가 이해는 여러 또는 동일한 축 중복 중 하나를 보여주는 것 이전에 삭제 한 'mouseout'이벤트이지만 그 중 하나를 디자인하는 방법을 잘 모르겠습니다.

누구나 내가 잘못하고있는 것을 지적하고 데이터를 어떻게로드해야합니까?

PS : 나는 jsfiddle을 만들려고하지만 내 호스팅 canada.json 데이터와 작동하도록 얻을 얻이 수없는 것

. https://raw.githubusercontent.com/GAO8A/GAO8A.github.io/master/canada.json

감사

Answer 1

문제는 당신이 tooltip 요소에 축을 계속 추가 할 것입니다. 불행히도 이것은 겹침을 만듭니다. 당신이 할 수있는 일은 축을 한 번 더 추가하고, 그 요소에 상응하는 새로운 값으로 도메인을 재조정하는 것입니다.

그래서 본질적으로 다음과 같은 줄을 추가 할 수 있다면 :

var X_AXIS = tooltip.append("g").attr("class", "x axis x-axis").attr("transform", "translate(0," + height + ")"); 
X_AXIS.call(xAxis) 
X_AXIS.append("text").attr("dy", "3em").attr("dx", "50em").style("text-anchor", "end").text("Month"); 
var Y_AXIS = tooltip.append("g").attr("class", "y axis y-axis") 
Y_AXIS.call(yAxis) 
Y_AXIS.append("text").attr("transform", "rotate(-90)").attr("dy", "-3em").attr("dx", "-8em").style("text-anchor", "end").text("Temperature (Celcius)"); 

당신의지도를 추가하기 전에, 이것은 의미에서 축 '초기화'것입니다.

mouseover 처리기에서 x 및 y 도메인을 결정한 직후에 다음 줄을 추가 할 수 있습니다. ,

X_AXIS.transition().duration(400).call(xAxis) 
Y_AXIS.transition().duration(400).call(yAxis) 

이 방법, 당신이 축을 계속 추가하지 않습니다 당신은 현재 intialized 사람을 재조정 : 더 나은 여전히 ​​

X_AXIS.call(xAxis) 
Y_AXIS.call(yAxis) 

또는

, 일부 전환을 추가 할 수 있습니다.

희망이 도움이됩니다.