다른 크기의 원에 대한 RangePoints

Question

거리가 중심이 아닌 가장자리로 계산되도록 다양한 크기의 원을 처리하려면 rangePoints를 지정할 수 있습니까?

예를 들어, 이것은 내가 얻는 것입니다.

()은 원 가장자리를 나타냅니다. < ---->이 rangePoints

( <----)---(-><-)-------(->) 

의해 계산 된 거리를 나타낸다^공지 중간 원은 가장 왼쪽의 원에 가까운 것처럼 보이는 방법.

var y = d3.scale.ordinal() 
    .domain(data.map(function(d) { return d.value})) 
    .rangePoints([0, width]); 

var item = chart.append("g") 
    .selectAll("circle") 
     .data(data) 
    .enter().append("circle") 
    .attr("cy", function(d) { return y(d.value); }) 

Answer 1

@LarsKotthoff가 언급 한 바와 같이, 당신은에 사용자 정의 규모의 구현을 필요 해요 :처럼 외모 뭔가를 사용하고

(  )<---->()<---->() 

기능을 대신, 나는 다음과 같은보고 싶어요 이 작업을 수행.

이 경우에는 규모가 도메인의 요소 수뿐만 아니라 정확한 값도 고려해야하기 때문에 다소 복잡 할 것입니다. 기본적으로 각 요소의 위치를 ​​계산할 때 스케일은 그 앞에있는 각 요소가 차지하는 공간을 고려해야하며 전체 공간을 나누는 기준으로 스페이서도 포함해야합니다. 여기

는해야 할 것입니다 무엇 : 먼저, 규모를 설정에서 다음을 수행 할 필요가

:

• 가 출력 범위에서 스팬 총 거리를 찾기
• 도메인의 각 요소의 지름의 합을 찾습니다.
• 차이점을 사용하여 나머지 요소를 찾습니다. g 가능한 공간
• 나눈다 자리의 수 (Number 소자 뺀)함으로써 나머지 공간

이렇게하면 각 원 사이에 필요한 공간에 대한 값을 제공한다.

• 이
• 는 곱하기 앞의 원
• 의 수에 의해 스페이서 값의 합을 추가 앞의 원의 지름의 합을 찾기 : 각 요소에 대해 다음

  현재 원의 반지름에 대한 것

이 때문에 여러분의 스케일은 인덱스뿐만 아니라 데이텀을 기반으로해야합니다.

여기 도메인 반경의 배열로 가정 매우 조질 구현 및 범위는 출력의 끝점이다

var customPointScale = function() { 
    var domain, 
     range; 
    // returned scale fn takes datum and index 
    function scale(d,i) { 
    var n = domain.length, 
     totalSpan = range[1] - range[0], 
     // loop over the domain to find the sum of the diameters 
     sumDiameters = (function(){ 
      var output = 0; 
      for (var a = 0; a < n; a++) { 
      // add radius * 2 to get diameter 
      output += domain[a] * 2; 
      } 
      return output; 
     })(), 
     remainingSpace = totalSpan - sumDiameters, 
     // there is one fewer space than the number of elements 
     spacer = remainingSpace/(n-1); 

    // loop over the elements that came before to find the distance spanned 
    var distanceSoFar = (function() { 
     var output = 0; 
     for(var a = 0; a < i; a++) { 
     // diameter + spacer, for each element traversed 
     output += (domain[a] * 2) + spacer; 
     } 
     return output; 
    })(); 

    // return the radius plus the distance traversed so far 
    return d + distanceSoFar; 
    } 
    scale.domain = function(_) { 
    if (!arguments.length) return domain; 
    domain = _; 
    return scale; 
    }; 
    scale.range = function(_) { 
    if (!arguments.length) return range; 
    range = _; 
    return scale; 
    }; 
    return scale; 
}; 

은 몇 가지 예를 들어 데이터와 함께 이러한 구현을 이용하는 JSBin예요. 희망이 도움이됩니다.