新手问题:如何将x轴刻度标签从x轴移开?下面的代码片段会产生这样的:如何在d3.js中远离x轴移动数字标签?
而我要的是更多这样的:
从问题在这里:
d3.js: Align text labels between ticks on the axis
它似乎我需要使用01选择包含这些标签的文本,然后给它们应用一些类似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>
元素通过呼叫加入到'xAxis',所以你需要像'd3.select文本( “g.x.axis”)全选( “文本”)'。 – 2014-11-02 15:46:31
感谢---这些评论非常有帮助! – user1071516 2014-11-02 16:25:41