1 回答
TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊
您看到的問題是 Symlog 音階的一個(gè)持續(xù)存在的問題:https://github.com/d3/d3-scale/issues/162
您可以在這個(gè)簡(jiǎn)單的演示中看到它:
const svg = d3.select("svg");
const scale = d3.scaleSymlog()
.domain([0, 100000])
.range([140, 10]);
const axis = d3.axisLeft(scale).ticks(4)(svg.append("g").attr("transform", "translate(50,0)"));
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
以下是可能的解決方案:
更改 D3 源代碼,如 GitHub 鏈接中所述;
為自己設(shè)置一個(gè)足夠刻度值的數(shù)組,您將傳遞給
axis.tickValues;使用 Log 刻度,其中域從 1 開始而不是從零開始。
最后一個(gè)選項(xiàng)似乎是一個(gè)黑客,但它是迄今為止最簡(jiǎn)單的,并且鑒于您的最高價(jià)值如此之大,從視覺上講,它不會(huì)對(duì)dataviz產(chǎn)生任何影響。在這里:
const svg = d3.select("svg");
const scale = d3.scaleLog()
.domain([1, 100000])
.range([140, 10]);
const axis = d3.axisLeft(scale).ticks(4).tickFormat(d => d3.format("")(d))(svg.append("g").attr("transform", "translate(50,0)"));
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
添加回答
舉報(bào)
