d3.format의 가변 정밀도

Question

d3.secg.axis.tickFormat과 함께 d3.format ("s")을 사용하여 국제 단위계 (SI) 단위로 눈금 라벨을 멋지게 형식화합니다. 반올림 오류가 발생하고 소수 자리를 반환하는 특정 값 (예 : 1400, 예 : 1400 * 0.001 = 1.4000000000000001)을 제외하고는 대부분 아름답게 작동합니다.

이 문제를 해결하기 위해 d3.format (".2s")와 같은 정밀도를 지정할 수 있지만이 경우 1이 더 좋은 경우 2 자리 숫자가 사용됩니다. 예를 들어, 틱이 [5000, 10000, 15000]이면 [5.0k, 10k, 15k]가 표시됩니다. 원래는 정밀도를 지정하지 않았을 때 [5k, 10k, 15k]를 얻었습니다.

최대 유효 자릿수가 지정된 수를 초과 할 때만 적용되도록 최대 정밀도를 지정할 수 있는지 궁금합니다. 따라서 5000은 5.0k가 아닌 5k가됩니다.

Answer 1

텍스트 문자열을 출력 할 익명 함수에 if/else 문을 넣으면됩니다. 그 안에서/다른 경우을 구문 분석하는 조건을으로 만족시키고 함수를 생성 할 수 있습니다. 예를 들면 다음과 같습니다.

var w = 30, h = 300; 
var data = [ 
    {'point':1, 'value':100.005}, 
    {'point':2, 'value':20.010}, 
    {'point':3, 'value':1000}, 
    {'point':4, 'value':5000.099}, 
    {'point':5, 'value':6000.934}, 
    {'point':6, 'value':9000.888}, 
    {'point':7, 'value':500.22}, 
    {'point':8, 'value':5.123}, 
    {'point':9, 'value':50.022}, 
    {'point':10, 'value':7000.999} 
]; 
var chart = d3.select("body").append("svg") 
    .attr('class', 'chart') 
    .attr("width", w * data.length - 1) 
    .attr("height", h); 

chart.selectAll('text') 
    .data(data) 
.enter().append('text') 
    .attr('x', function(d, i) { return x(i); }) 
    .attr('y', function(d) { return h - y(d.value); }) 
    .attr('dx', '0.75em') 
    .attr('dy', '-0.3em') 
    .attr('text-anchor', 'start') 
    .text(function(d) { 
    if(d.value > 5000) { 
     // Define your formatting function to return SI units 
     var si = d3.format('s'); 
     return String(si(d.value)); 
    } else { 
     // Otherwise round to the nearest integer 
     return String(d3.round(d.value, 0)); 
    } 
    }); 

희망이 있습니다.

Answer 2

1400 * .001은 1.4000000000000001이지만 1400/1000은 1.4입니다. 정수에 10의 음수 (예 : .001)를 곱하면 반올림 오류가 발생할 수 있지만 정수를 10의 제곱으로 나눈 값 (예 : 1000)은 나타나지 않습니다. 아니면 적어도 덜 가능성이 있습니까? fix-si-format-rounding 분기에서 임시 픽스를 구현했습니다. 엄격하게 역 호환되지는 않지만, d3.formatPrefix 함수가 문서화되지 않았기 때문에 다음 패치 릴리스에 포함하는 것이 안전하다고 생각합니다.

편집 :이 수정 버전은 2.9.2 버전에서 출시되었습니다.