뷰 파인더가있는 막 대형 차트 d3.js

Question

막 대형 차트의 d3.js에서 뷰 파인더 기능을 제공하는 방법. 뷰 파인더가있는 차트는 http://nvd3.org/ghpages/lineWithFocus.html과 같으며 뷰 파인더 기능을 통합하려는 막대 차트는 http://nvd3.org/ghpages/multiBar.html과 같습니다. 어느 누구도이 일을 도와 줄 수는 없어요. 나는 일주일 내내 찾고있어 아무것도 얻을 수 없습니다.

Answer 1

찾고있는 것이 아직 라이브러리에 내장되어 있지 않습니다. REPO를 https://github.com/novus/nvd3/blob/master/src/models/lineWithFocusChart.js

복제 및 (나는 그들이 끌어 오기 요청 싶지만 확신 :]) 자신의 모델 barWithFocusChart.js을 구축 : 당신은 튜토리얼을 찾을 수 있습니다

을 가장 좋은 살펴보고있다 http://mbostock.github.io/d3/tutorial/bar-2.html

그리고 당신은 조정 전망에 읽을 수 있습니다 : 당신이 할 수있는 사실 http://square.github.io/crossfilter/

Answer 2

,하지만 당신은 그것을 확인해야 d3.js에 바 문자를 구축하는 방법. 그리고 매우 간단합니다!

nvd3.org에서 파일 다운로드 "linePlusBarWithFocusChart.html"파일을 가져옵니다. 편집해야합니다.

라인 부분의 데이터를 제거하는 것이 무엇입니까? 막대 데이터 만 존재합니다.. 예를 통해 같은

데이터 입력 :

var testdata = [{ 
     "key": "Quantity", 
     "bar": true, 
     "values": [ 
      [1136005200000, 1271000.0], 
      [1138683600000, 1271000.0], 
      [1141102800000, 1271000.0], 
      etc. .]  
    }, { 
     "key": "Price",  //Line chart data values are to be deleted. 
     "values": [ 

     ] 
    }] 

그리고 마지막 라인 차트의 축 데이터 제거 :

chart.y2Axis 
.tickFormat(function(d) { 
    // return '$' + d3.format(',.2f')(d) //what was present in the example 
    return ''; 
}); 

chart.y4Axis 
.tickFormat(function(d) { 
// return '$' + d3.format(',.2f')(d) //what was present in the example 
return ''; 
}); 

당신은에서 떨어져 전설을 설정 할 수 있습니다 파일 nvd3.js - 행 번호 : 6871 여기서 model : linePlusBarWithFocusChart가 정의됩니다.

Put showLegend = false;

동일한 모델의 nvd3.js에서 showTooltip 기능을 사용 중입니다.

var showTooltip = function(e, offsetElement) { 
    if (extent) { 
     e.pointIndex += Math.ceil(extent[0]); 
    } 
    var left = e.pos[0] + (offsetElement.offsetLeft || 0), 
     top = e.pos[1] + (offsetElement.offsetTop || 0), 
     x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)), 
     y = (e.series.bar ? y1Axis : y1Axis).tickFormat()(lines.y()(e.point, e.pointIndex)), 
     content = tooltip(e.series.key, x, y, e, chart); 

    nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement); 
    }; 

는 지금 파일을 실행하고 당신은 단지 막대 차트가 존재하는지 확인할 수 있습니다. 이것은 적절한 방법이 아니지만 무서운 상황에서 도움이됩니다. 원하지 않는 요소를 더 편집해야 할 수도 있습니다.

아무 의문이나 여쭈어보십시오.