[英]How do you move number labels further away from the x-axis in d3.js?
Newbie question: How can one move the x-axis tick labels further from the x-axis? 新手问题:如何从x轴进一步移动x轴刻度标签? The snippet of code below produces this:
下面的代码片段产生了这样的:
Whereas what I want is more like this: 而我想要的更像是这样的:
From the question here: 从这里的问题:
d3.js: Align text labels between ticks on the axis d3.js:在轴上的刻度之间对齐文本标签
it seems that I need to select the text that contains these labels using select
and then apply something like translate(0,-10)
to them, but I can't figure out where this text "lives"/the syntax for performing such a selection. 似乎我需要使用
select
包含这些标签的文本,然后对它们应用translate(0,-10)
的东西,但是我无法弄清楚这个文本“生活”的位置/执行这样的语法选择。 Sorry if this is simple; 对不起,如果这很简单; I am very new to D3 (and javascript).
我是D3(和javascript)的新手。 Can anyone help?
有人可以帮忙吗? Thanks in advance!
提前致谢! Code follows.
代码如下。
<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>
There's a simpler way to do this using tickPadding . 使用tickPadding有一种更简单的方法。 Where you define
xAxis
, just add .tickPadding(15)
(change 15 to the number of pixels you want). 在定义
xAxis
,只需添加.tickPadding(15)
(将15更改为所需的像素数)。
Example here: http://jsfiddle.net/henbox/5q4k2r0p/1/ 示例: http : //jsfiddle.net/henbox/5q4k2r0p/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.