d3 애니메이션 스파크 라인 그래프의 값을 툴팁에 표시하는 방법은 무엇입니까?

sparkline 위에 마우스를 올려 놓을 때 툴팁에 배열 값을 표시하고 싶습니다. 나는 적응 코드를 가지고있다 http://bl.ocks.org/benjchristensen/1148374 d3 애니메이션 스파크 라인 그래프의 값을 툴팁에 표시하는 방법은 무엇입니까?

스파크 라인에 마우스를 올렸을 때 배열 값을 표시 할 때 다음 코드를 추가했지만 첫 번째 인덱스 값만 표시했다.

var tooltip = d3.select(id) 
    .append("div") 
    .attr("id","toolTip"+toolTipId) 
    .style("position", "absolute") 
    .style("z-index", "10") 
    .style("visibility", "hidden") 
    .style("background", "#6a7883") 
    .style("color", "white") 
    .style("height", "20px") 
    .style("width", toolTipWidth) 
    .style("text-align", "center") 
    .style("font-size", "11px") 
    .text("a simple tooltip"); 
    d3.select(id+" svg path") 
    .data(arr)  
    .on("mouseover", function(d,i){tooltip.text(msgToolTipPrefix+" "+arr[i]+""+msgToolTipPostfix); return tooltip.style("visibility", "visible");}) 
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) 
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

출처

2016-08-19 Anil Jagtap

'mousemove'와'mouseout' 함수 모두에서'return'을 제거하십시오. –

Gerardo Furtado 고맙습니다. 첫 번째 인덱스 값을 제거하고 마지막 인덱스로 이동하고 배열을 이동합니다. mousemove와 mouseout 모두에서 반환 값을 제거했습니다. 하지만 여기서 저는 항상 제로를 값어 야합니다. 따라서 마우스 오버시 첫 번째 인덱스 값을 계속 보여줍니다. –

이 특정 예에서는 라인이 하나의 SVG 경로 (DOM 요소)로 표시됩니다. D3은 데이터를 DOM 요소에 바인딩하고 경로 세그먼트에는 바인딩하지 않습니다. 그래서 항상 동일한 데이터를 볼 수 있습니다.

라인을 별도의 호버 블 세그먼트 (예 : this block)로 분할 할 수 있습니다. 결과에는 마우스 이벤트가 바인딩 된 SVG 경로 배열이 있습니다. 당신은 내가 아는 한, 마우스 이벤트에 따라 Y 데이터를 보간 할 수 있습니다

path 
 
    .on("mouseover", function(d) { tooltip.text("Hello "+d[0][1]+ "."); return tooltip.style("visibility", "visible");}) 
 
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) 
 
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

는, D3는하지 않을 것이다 : 당신은 거기 사소한 조작하여 툴팁 코드를 사용할 수 있습니다 자동으로 (그리고 나는 '스플라인'보간법이 선을 렌더링하는 데 사용될 때 어떻게하는지 알지 못합니다).

출처

2016-08-21 17:02:39 Nixie

d3 애니메이션 스파크 라인 그래프의 값을 툴팁에 표시하는 방법은 무엇입니까?

답변

관련 문제