D3获取坐标轴上的刻度数据和格式化数据

最新推荐文章于 2022-11-18 14:38:33 发布

shidouyu

最新推荐文章于 2022-11-18 14:38:33 发布

阅读量723

点赞数

分类专栏： Vue D3

本文链接：https://blog.csdn.net/shidouyu/article/details/114024219

版权

Vue 同时被 2 个专栏收录

36 篇文章 6 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

如果你有参考 axis,你可以使用：
axis.scale().ticks()

如果你想要将它们全部格式化,我会从DOM中获取它们：

d3.selectAll(".tick>text") .nodes() .map(function(t){ return t.innerHTML; })

完整代码如下：

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 0, bottom: 20, left: 0},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scalePoint()
    .domain([0, 1, 2])
    .range([0, width])
    .padding(1);

var y = d3.scaleLinear()
    .domain([-1e6, 2e6])
    .range([height, 0]);

var axis = d3.axisLeft(y)
        .ticks(20, "s");
        
g.append("g")
    .attr("transform", "translate(" + x(0) + ",0)")
    .attr("class", "axis")
    .call(axis);
    
console.log(
  axis.scale().ticks()
);

console.log(
  d3.selectAll(".tick>text")
    .nodes()
    .map(function(t){
      return t.innerHTML ;
    })
);
    
</script>

shidouyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3获取坐标轴上的刻度数据和格式化数据

如果你有参考axis,你可以使用：axis.scale().ticks()如果你想要将它们全部格式化,我会从DOM中获取它们：d3.selectAll(".tick>text") .nodes() .map(function(t){ return t.innerHTML; })完整代码如下：<!DOCTYPE html><meta charset="utf-8"><svg width="960" height="500"></svg..
复制链接

扫一扫