Tạo một kích thước asinh (ngược hyperbol sin) trong d3.js v4

Question

Đây sẽ là một thay thế cho thang đo log để nó có thể xử lý các số âm. Đã không nhìn thấy nhiều ví dụ về quy mô tùy chỉnh mặc dù tôi đã cố gắng sử dụng nguồn của quy mô lôgarit của d3 làm điểm bắt đầu.

Answer 1

Ví dụ tốt nhất trong tài liệu có vẻ là tính năng nội suy của thang đo. Xem https://github.com/d3/d3-scale/blob/master/README.md#continuous-scales

var color = d3.scaleLinear() 
    .domain([10, 100]) 
    .range(["brown", "steelblue"]) 
    .interpolate(d3.interpolateHcl); 

Tôi không thực sự là chuyên gia d3 vì vậy tôi hy vọng điều đó sẽ hữu ích.

Answer 2

Theo như tôi biết không có cách nào để thực hiện quy mô tùy chỉnh trong D3 (ít nhất là không theo nghĩa bạn đang tìm kiếm). Tất cả quy mô D3 mở rộng theo hai bước:

1. sử dụng tên miền, deinterpolate đầu vào cho một hàm deinterpolation
2. sử dụng phạm vi, nội suy các kết quả trung gian từ bước 1 để có được sản lượng

tôi tin rằng câu trả lời lý tưởng của bạn về cơ bản sẽ trả lời câu hỏi, "làm cách nào để đặt chức năng nội suy của quy mô D3 thành chức năng tùy chỉnh?" và tôi không nghĩ rằng điều này hiện có thể thực hiện được.

Tuy nhiên, bạn có thể đặt chức năng nội suy. Ví dụ này từ Mike Bostock cho thấy cách đặt nội suy bằng cách sử dụng một trong các chức năng dễ dàng cài sẵn của D3: http://bl.ocks.org/mbostock/56ea94205411ee9e4dbec3742f7ad08c

Ví dụ này có tác dụng "ống kính mắt cá", có lẽ là ngược lại với những gì bạn muốn. Bạn có thể sử dụng hàm nới lỏng đa thức, d3.easePolyInOut, với số mũ nhỏ hơn một để có được thứ gì đó gần gũi hơn với việc chia tỷ lệ nhật ký (xem đoạn mã của tôi). Thật không may, không có "logInOut" hoặc "asinhInOut", vì vậy nếu bạn cần một rolloff dốc hơn (so với đa thức), thì bạn sẽ phải viết chức năng nới lỏng/nội suy của riêng bạn.

var data = Array.from(Array(21), (_,i)=>{return 10*(i-10)}) 
 

 
var svg = d3.select("svg"), 
 
    margin = {top: 50, right: 20, bottom: 5, left: 20}, 
 
    width = svg.attr("width") - margin.left - margin.right, 
 
    height = svg.attr("height") - margin.top - margin.bottom, 
 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var polyexp = 0.25 
 

 
var x = d3.scaleLinear() 
 
    .domain([-100,100]) 
 
    .range([0, width]) 
 
    .interpolate(easeInterpolate(d3.easePolyInOut.exponent(polyexp))); 
 

 
g.append("g") 
 
    .attr("class", "axis axis--x") 
 
    .call(d3.axisBottom(x)); 
 

 
g.selectAll("circle").data(data).enter().append("circle") 
 
    .attr("cx", (d) => x(d)) 
 
    .attr("cy", -10) 
 
    .attr("r", 3) 
 
    .attr("fill", "steelblue") 
 

 
function easeInterpolate(ease) { 
 
    return function(a, b) { 
 
    var i = d3.interpolate(a, b); 
 
    return function(t) { 
 
     return i(ease(t)); 
 
    }; 
 
    }; 
 
}

.axis text { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script> 
 
<svg width="600" height="100"></svg>