d3.js & nvd3.js — y 축 범위 설정 방법

d3.js & nvd3.js — y 축 범위 설정 방법

---

차트의 y 축 범위를 1-100으로 설정하려고합니다.

API 문서를 참조하고 여기 https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues에 표시된대로 axis.tickValues로 가능한 솔루션을 찾았습니다.

그러나 옵션을 사용하면 작동하지 않습니다. axis.tickSize 아래에 링크 된 문서 페이지에서 더 아래로 읽으면 다음 줄이 발견되었습니다.

끝 눈금은 관련 스케일의 도메인 범위에 의해 결정되며 눈금 선이 아닌 생성 된 경로 도메인의 일부입니다.

따라서 Axis 옵션을 통해 범위의 최소 및 최대 설정을 수행 할 수 없습니다.

범위를 지정할 수있는 위치에 대한 아이디어가 있습니까?

---

해결책을 찾았습니다.

.forceY([0,100])차트의 인스턴스화에 추가 하면 축이 배열에 지정된 범위를 사용하게됩니다.

여기 예제에서 http://nvd3.org/livecode/#codemirrorNav

.forceY([0,100])차트 변수에 추가 하면 작동합니다.

---

이름에서 알 수 있듯이 이렇게하면 배열의 값이 y도메인 에 추가 되고 y 도메인이로 설정되지 않습니다 [0,100]. 당신이 설정 그렇다면 [0,100]및 데이터의 도메인이 -10에 110, 도메인이 될 것입니다 [-10,110].

이제 [0,100]데이터가 더 큰 경우에도 도메인을 사용하려면 사용할 수 있습니다 chart.yDomain([0,100]).하지만 일반적으로 도메인에 데이터를 포함 시키길 원하므로 chart.yDomain. 대신 chart.forceY를 사용하는 것이 좋습니다 . 보시다시피 forceY의 가장 일반적인 용도 중 하나 forceY([0])는 도메인에서 항상 0을 만드는 것입니다.

함수가 실제로 수행하는 작업을 이해하는 데 도움이되기를 바라며, arboc7은 범위를 데이터 세트보다 작게 만드는 데 작동하지 않는 이유를 설명합니다.

---

누적 영역 차트의 경우 .forceY([0,100])작동하지 않습니다. 대신 사용.yDomain([0,100])

---

y-domain누적 영역 차트에 대해 (표시되어야하는 숫자 범위) 설정을 의미하는 경우 다음 과 같이 작동합니다.

nv.models.stackedAreaChart()
  .x(function(d) {...})
  .y(function(d) {...})
  .yDomain([0, maxY])
...

---

나는 다음과 같이 시도했다.

chart.forceY([DataMin, DataMax]);

Datamin 및 Datamax는 어레이에서 계산해야합니다. 또한 필터를 적용 할 때 축 점을 동적으로 조정하려면 다음과 같은 필터의 클릭 이벤트를 사용자 정의해야합니다.

$('g.nv-series').click(function() {
   //Calculate DataMin, DataMax from the data array                    
   chart.forceY([DataMin, DataMax]);                        
});

따라서 그래프는 필터가 적용될 때마다 조정됩니다.

---

비슷한 문제가 있었고 yAxis의 yScale에서 도메인을 명시 적으로 정의하여 문제를 해결했습니다.

var yscale = d3.scale.linear()
                     .domain([0,100])
                     .range([250, 0]);
var yAxis = d3.svg.axis()
                  .scale(yscale);

참조 URL : https://stackoverflow.com/questions/11766879/d3-js-nvd3-js-how-to-set-y-axis-range