나는 내 프로젝트 중 하나를 처음 사용 D3.js하고 현재 개발 line chart중입니다. 여기 에서 설명서와 예제를 참조 하고 여기에서 고유 한 버전을 만들었습니다 . 이제 여기에 두 가지 대화 형 기능을 추가 할 계획입니다.
이 기능을 더 명확하게하려면이 예 를 참조하십시오 .
제안에서 나온 시도는 다음과 같습니다.
svg.append("g") // creating new 'group' element
.selectAll('rect') // adding a rectangle for the label
.selectAll('line'); // adding a line
그러나 선과 사각형은 표시되지 않습니다. 나는 인터넷 검색을 많이 해왔지만 헛된 것은 아닙니다. 내가 무엇을 놓치고 있습니까?
//create groups for line and label (and invisible selection area)
var infos = svg.append('g')
.selectAll('rect')
.data(data)
.enter()
.append('g')
//move to datapoint location
.attr('transform',function(d,i){d.x = x(d.date) ; d.y = 0; return "translate(" + d.x + "," + d.y + ")";});
//create and select line "rectangles" (easier than doing actual lines)
infos.append("rect")
.attr('class','line')
.attr('height', height)
.attr('width', 1)
.attr('opacity',0);
//create and select line "rectangles" (easier than doing actual lines)
infos.append("rect")
.attr('class','area')
.attr('height', height)
//should probably do something to make sure they don't overlap, such as measure distance between neighbours and use that as width
.attr('width', width/data.length/2)
.attr('opacity',0)
//move so that the data point is in the middle
.attr('x',-width/data.length/4)
.on('mouseover', function(){
g_elem = this.parentNode;
d3.select(g_elem).selectAll(".line").attr("opacity",1);
})
.on('mouseout', function(){
g_elem = this.parentNode;
d3.select(g_elem).selectAll(".line").attr("opacity",0);
});
레이블의 경우 다음과 같은 유용한 예가 있습니다. http://jsfiddle.net/WLYUY/5/ ( D3.js에서 : 마우스 위치가 아닌 요소 위치를 사용하여 툴팁 위치 지정? )
마우스 좌표를 사용하려면 다음과 같이 할 수 있습니다.
var coordinates = [0, 0];
coordinates = d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];
( D3의 마우스 위치에서 )
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다