d3.js v4でasinh（inverse hyperbolic sine）スケールを作成する

Question

これは、負の数を扱うことができるようにログスケールを置き換えるものです。私はd3の対数スケールのソースを出発点として使用しようとしていましたが、カスタムスケールの例はあまり見かけませんでした。

Answer 1

ドキュメントの最良の例は、スケールの補間機能のようです。私は本当にD3の専門家ではない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); 

を参照してくださいので、私はそれが役に立てば幸い。

Answer 2

私が知っている限り、D3でカスタムスケールを作る方法はありません（少なくともあなたが探している意味ではありません）。全てD3スケールは、2つのステップでスケール：

1. ドメインを使用して、範囲を使用してdeinterpolation機能
2. 与えられた入力をdeinterpolate、出力を

Iを得るために、ステップ1からの中間結果を補間あなたの理想的な答えは基本的に質問に答えるだろう「D3スケールのデインターポレーション機能をカスタム機能に設定するにはどうすればよいですか？、これは現在可能だとは思わない。

ただし、補間機能を設定することができます。 http://bl.ocks.org/mbostock/56ea94205411ee9e4dbec3742f7ad08c

の例では、ちょっと、おそらく何をしたいの反対側にある「魚眼レンズ」効果を、持っていること：マイク・ボストックからのこの例では、D3の安心機能で構築されたのいずれかを使用して補間を設定する方法を示しています。多項式イージング関数d3.easePolyInOutを使用し、指数が1未満の場合、ログのスケーリングに近づくことができます（私のコードスニペットを参照）。残念ながら、 "logInOut"や "asinhInOut"はありませんので、多項式よりも急峻なロールオフが必要な場合は、独自のイージング/補間関数を作成する必要があります。

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>