d3.js는

Question

내가이 간단한 선형 스케일이 필요한 것보다 더 많은 요소를 제공하는 기능을 틱

[0, 50, 100, 150, 200, 250] 

그러나 x.ticks(11) 반환 :

[0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240] 

내가 원하는 것은 다음과 같습니다.

[0, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250] 

어떻게 수정합니까?

Answer 1

나는 서수 척도와 비슷한 문제가 있었는데, 나는 데이터에서 균등 간격의 간격을 선택하기위한 코드를 작성했다. 축에서 항상 첫 번째와 마지막 데이터 요소를 선택하기를 원했기 때문에 중간 부분 만 계산합니다. 하나 또는 두 개의 쓰레기통에 잔류 물을 가지기보다는 일부가 균등하게 나뉘어지지 않기 때문에, 내가가는대로 그것을 쓰레기통에 흩어지게합니다. 잔류 물이 없어 질 때까지

여기가이 작업을 수행 할 수있는 간단한 방법은 아마도하지만 내가 무슨 짓을했는지 : yourData 데이터의 배열입니다

getTickvalues(yourData, numValues, [optionalAccessor]); 

, numvalues가 있습니다 :

function getTickValues(data, numValues, accessor) 
{ 
    var interval, residual, tickIndices, last, i; 

    if (numValues <= 0) 
    { 
    tickIndices = []; 
    } 
    else if (numValues == 1) 
    { 
    tickIndices = [ Math.floor(numValues/2) ]; 
    } 
    else 
    { 
    // We have at least 2 ticks to display. 
    // Calculate the rough interval between ticks. 
    interval = Math.floor(data.length/(numValues-1)); 

    // If it's not perfect, record it in the residual. 
    residual = Math.floor(data.length % (numValues-1)); 

    // Always label our first datapoint. 
    tickIndices = [0]; 

    // Set stop point on the interior ticks. 
    last = data.length-interval; 

    // Figure out the interior ticks, gently drift to accommodate 
    // the residual. 
    for (i=interval; i<last; i+=interval) 
    { 
     if (residual > 0) 
     { 
     i += 1; 
     residual -= 1; 
     } 
     tickIndices.push(i); 
    } 
    // Always graph the last tick. 
    tickIndices.push(data.length-1); 
    } 

    if (accessor) 
    { 
    return tickIndices.map(function(d) { return accessor(d); }); 
    } 
    return tickIndices.map(function(i) { return data[i]; }); 
} 

당신은을 통해 함수를 호출 원하는 틱 수. 배열에 복잡한 데이터 구조가 있으면 선택적 접근자가 편리합니다.

마지막으로 이것을 축에 공급합니다. 분명히 d3에 대한 힌트 일 뿐인 틱 (numTicks) 대신 tickValues ​​()를 호출합니다.

귀하의 tickValues가 귀하의 데이터를 서수 비율에 정확히 일치시켜야한다는 어려운 방법을 알게되었습니다. 이것은 선형 스케일에 도움이 될 수도 있고 그렇지 않을 수도 있지만 어쨌든 그것을 공유 할 것이라고 생각했습니다.

희망이 도움이됩니다.

• 특허

Answer 2

x.ticks (11)를 원하는 배열로 바꾸면이 문제를 해결할 수 있습니다. 코드는 다음과 같습니다 및 x는 리니어 스케일의 경우

그래서 :

chart.selectAll("line") 
    .data(x.ticks(11)) 
    .enter() 
    .append("line") 
    .attr("x1", x) 
    .attr("x2", x) 
    .attr("y1", 0) 
    .attr("y2",120) 
    .style("stroke", "#CCC"); 

당신은 (11) x.ticks을 대체 할 수 배열 :

var desiredArray = [0, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250] 
chart.selectAll("line") 
    .data(desiredArray) 
    .enter() 
    .append("line") 
    .attr("x1", x) 
    .attr("x2", x) 
    .attr("y1", 0) 
    .attr("y2",120) 
    .style("stroke", "#CCC"); 

리니어 스케일이 자동 것이다 입력에 따라 원하는 축을 배치하십시오. 틱()이 원하는 분리를 제공하지 않는 이유는 d3이 틱()을 제안으로 처리하기 때문입니다.

Answer 3

axis.tickvalues((function(last, values) { 
    var myArray = [0]; 
    for(var i = 1; i < values; i++) { 
     myArray.push(last*i/(values-1)) 
    } 
    return myArray; 
    })(250, 11)); 

이 특정 범위에서 원하는 눈금 값의 개수를 특정하면 균일하게 이격 배열을 제공한다.