如何获得D3.js轴的滴答和位置作为数组? [英] How can I get the D3.js axis ticks and positions as an array?
本文介绍了如何获得D3.js轴的滴答和位置作为数组?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我通常在svg上放置我的轴刻度线:
I usually place my axis ticks on the svg using this:
d3.svg.axis().scale(xScale(width)).ticks(4)
可以得到这些tick值和它们的svg坐标所以我可以使用自定义轴外的svg使用 d3.svg.axis()
?
Is it possible to get these tick values and their svg coordinates so I can use a custom axis outside the svg using d3.svg.axis()
?
推荐答案
是的, xScale.ticks(4)
应该给你实际的滴答点作为值,你可以通过你的 xScale
到X位置。您还可以在将轴应用到实际元素后,从生成的元素中拉回点滴点:
Yes, xScale.ticks(4)
should give you the actual tick points as values, and you can pipe those back through your xScale
to the the X position. You can also just pull the tick points back from the generated elements after you apply the axis to an actual element:
var svg = d3.select("svg");
var scale = d3.scale.linear()
.range([20, 280])
.domain([0, 100])
var axis = d3.svg.axis().scale(scale).orient("bottom").ticks(9);
// grab the "scale" used by the axis, call .ticks()
// passing the value we have for .ticks()
console.log("all the points", axis.scale().ticks(axis.ticks()[0]));
// note, we actually select 11 points not 9, "closest guess"
// paint the axis and then find its ticks
svg.call(axis).selectAll(".tick").each(function(data) {
var tick = d3.select(this);
// pull the transform data out of the tick
var transform = d3.transform(tick.attr("transform")).translate;
// passed in "data" is the value of the tick, transform[0] holds the X value
console.log("each tick", data, transform);
});
这篇关于如何获得D3.js轴的滴答和位置作为数组?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文