nvd3.js 차트 ajax 데이터 다시 그리기 - hoverreffect + 이전 YAxis 스케일이 없음

Question

nvd3을 사용하여 ajax 요청을 통해 데이터를받는 간단한 선형 차트를 그립니다. 첫 번째 그리기 요청은 완벽하게 작동하지만 다시 그리기 작업은 수행하지 않습니다. 차트는 동일한 드로잉 기능을 호출하지만 다른 데이터 + 차이 최대/최소 값을 사용하여 다시 그리십시오.

새 데이터로 차트를 다시 그릴 때 도구 설명과 달리 "호버 원"이 나타나지 않습니다. 또한 차트의 범례를 클릭하고 호버가 다시 나타나지만 yAxis의 값이 첫 번째 차트의 값으로 변경되도록 다시 그리도록합니다.

지금까지 차트를 다시 그릴 때 이전 최대/최소값이 유지되지만 "마우스 오버"효과에 대해서만 가정합니다. 지금까지 그리기에도 일반 차트는 괜찮아 보입니다. 문제는 그냥 마우스를 가져 가면됩니다.

소리가 꽤 혼란 스럽지만 잘하면 당신은 요점을 얻을 것이다.

일부 코드 : 나는 단지 NVD3와 D3 자신과 시작했습니다

d3.json(queryurl, function(data2){ 
    nv.addGraph(function(jsonData) { 
    if(chart){ 
     chart.remove(); 
    } 
    chart = nv.models.lineChart() 
       .x(function(d) { return d[0] }) 
       .y(function(d) { return d[1] }) 
       .color(d3.scale.category10().range()); 

    chart.xAxis 
     .tickFormat(function(d) { 
      return d3.time.format('%x')(new Date(d)) 
     }); 

    chart.yAxis 
     .scale() 
     .tickFormat(d3.format('')); 

    chart.lines.yDomain([maxmin.max,maxmin.min]); 

    d3.select('#chart1 #chartsvg') 
     .datum(data2) 
     .transition().duration(600) 
     .call(chart); 

    nv.utils.windowResize(chart.update); 

}); 

}); 
    return chart;} 

Answer 1

그러나 비슷한 일을하고있는 중이 야. 나를 위해 일한 것은 차트 생성 기능으로 데이터 업데이트 기능을 분리하는 것입니다. 하지만 아래의주의 ...

주의 마십시오 나는 그래프 만들기 위해 다음과 같은 한 :

initGraph = function(url) { 
    d3.json(url, function(data) { 
    nv.addGraph(function() { 
     chart = nv.models.multiBarChart(); 

     d3.select('#chart svg').datum(data).transition().duration(500).call(chart); 
     nv.utils.windowResize(chart.update); 

     return chart; 
    }); 
    }); 
}; 

을 다음과 같은 기능을하는 것은 그것을 업데이트 :

redrawGraph = function(url) { 
    d3.json(url, function(data) { 

    d3.select('#chart svg').datum(data).transition().duration(500).call(chart); 
    nv.utils.windowResize(chart.update); 
    }); 
}; 

내가 알고하지 않습니다 이것은 내가 여전히 "해킹 될 때까지 해킹"단계에 있기 때문에 권장되는 해결책입니다. 이를 통해 redrawGraph() (축 다시 그리기 및 툴팁 포함) 호출 후에 차트의 모든 기능이 작동합니다.

주의 할이 때때로 잘못 계산 될 것으로 보인다는 재 계산에 틱 :

Answer 2

은 다시 그리는 전에 SVG 요소에 .empty()를 사용해보십시오.