[英]How do you move number labels further away from the x-axis in d3.js?
新手問題:如何從x軸進一步移動x軸刻度標簽? 下面的代碼片段產生了這樣的:
而我想要的更像是這樣的:
從這里的問題:
似乎我需要使用select
包含這些標簽的文本,然后對它們應用translate(0,-10)
的東西,但是我無法弄清楚這個文本“生活”的位置/執行這樣的語法選擇。 對不起,如果這很簡單; 我是D3(和javascript)的新手。 有人可以幫忙嗎? 提前致謝! 代碼如下。
<script>
var superscript = "⁰¹²³⁴⁵⁶⁷⁸⁹",
formatPower = function(d) { return (d + "").split("").map(function(c) { return superscript[c]; }).join("");\
};
var margin = {top: 20, right: 20, bottom: 100, left: 100},
width = 400,
height = 400;
var x = d3.scale.log()
.domain([1e1, 1e4])
.range([0, width])
.nice();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues([1e1, 1e2, 1e3, 1e4])
.ticks(0, function(d) { return 10 + formatPower(Math.round(Math.log(d) / Math.LN10)); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", (width+margin.left)/2)
.attr("y", 60)
.style("text-anchor", "end")
.text("x-axis label");
</script>
使用tickPadding有一種更簡單的方法。 在定義xAxis
,只需添加.tickPadding(15)
(將15更改為所需的像素數)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.