nvd3 descrete 막대 차트 값이 중복 됨

Question

nvd3.js를 사용하여 사용자 지정 descrete bar chart를 만들고 있는데, 대신 하나의 값 대신 2 개의 값 배열을 전달해야합니다. 이 decrete 막대 차트의 nvd3 예로부터 기본 데이터 배열 :

historicalBarChart = [ 
           { 
               key: "Cumulative Return", 
               values: [ 
                   { 
                       "label": "May", 
                       "value": 32, 
                   }, 
                   { 
                       "label": "Jun", 
                       "value": 22 
                   }, 
                   { 
                       "label": "Jul", 
                       "value": 37 
                   }, 
                   { 
                       "label": "Aug", 
                       "value": 42 
                   }, 
                   { 
                       "label": "Sep", 
                       "value": 18 
                   }, 
                   { 
                       "label": "Oct", 
                       "value": 14 
                   }, 
                   { 
                       "label": "Nov", 
                       "value": 34 
                   }, 
                   { 
                       "label": "Dec", 
                       "value": 5 
                   } 
               ] 
           } 
       ]; 

는 여기에 차트 http://www.dodaj.rs/f/47/BU/3mMgYntS/screen-shot-2013-12-21-a.png 의 사진입니다 이것은 내 모습 방법입니다 : 내가의 두 번째 배열을 추가 할 때

데이터 바는이 이미지와 같습니다. http://www.dodaj.rs/f/k/MP/4yKWKm66/screen-shot-2013-12-21-a.png

두 번째 이미지 막대에서 볼 수 있듯이 매달 2 개의 막대가있는 공간이 있지만 서로 겹치지 않습니다. 나는 모든 것을 시도했지만 nvd3에 익숙하지 않으며 막대를 겹치지 않게 만드는 방법을 알아낼 수 없습니다.

Answer 1

차트에 같은 값이 여러 값으로 매핑되는 이유는 무엇입니까?

문제는 NVD3 코드에서 사용되는 기본 스케일입니다. d3의 서수 비늘 은 해당 값을 차트 내의 해당 위치에 매핑합니다. 당신은 당신이 다른 영역 2 개월을 매핑 할 경우 에 지도에 값를 사용하는 고유 한 데이터 도메인의 각 항목에 대한이 있어야합니다. 서수 함수에 전달 될 때 도메인의 값이 다시 사용될 경우 첫 번째 값에 대해 매핑 된 해당 위치에 매핑됩니다.

var domain= ["January","February",...,"December"]; 

var set1 = [{"Month":"January", "Value":2},{{"Month":"February", "Value":3}}]; 
var set2 = [{"Month":"January", "Value":6},{{"Month":"August", "Value":20}}]; 

var ordinalScale = d3.scale().ordinal().domain([domain]); 

if (ordinalScale(set1[0].Month) == ordinalScale(set2[0].Month)) 
{ 
    console.log("true") 
} 

코드가 컴파일되면 true로 인쇄됩니다.

당신이 직면하고있는 문제는 당신이 일대일 기능을 사용하고 있다는 것입니다 :

는 직관적으로 문제를 이해. 이것에 대해 생각해보십시오.

도메인 (x = 1..10)이 있다고 가정합니다. 함수 정의 f (x) = x + 1

x를 입력하면 어떻게됩니까?

F (1) = 2

F (2) = 3

F (1) = 동일한 입력에 대해 생성 동일한 X 입력 여러 번 얼마나 2

공지 ? 그것은 f (x)가 그렇게 행동하도록 정의했기 때문에 발생합니다.

솔루션 :

이 같은 그룹화 차트로 차트의 다른 유형을 사용하는 것입니다 해결할 수있는 방법입니다. 이 자신을 해결할 수있는 또 다른 방법은 각 데이터 조각에 대해 고유 한 값을 생성하여 도메인 값으로 사용하는 것입니다 (예 : 다음 데이터 수정).

var set1 = [{"Month":"January", "Value":2, "Serial":1},{{"Month":"February", "Value":3},"Serial":2}]; 
var set2 = [{"Month":"January", "Value":6,"Serial":3},{{"Month":"August", "Value":20, "Serial":4}}]; 

이렇게하면 문제가 해결되지만 새 것을 만들 수 있습니다. 도메인 값을 사용하여 레이블을 생성하므로 개월 대신 값이 표시됩니다. 이 문제를 해결하려면 틱 포맷터를 사용하여 일련 번호 대신 월을 표시하십시오.