Question

我为日期范围创建了一个xAxis，该日期范围分为5个刻度，我如何“获取”刻度值？例如：刻度显示1月，2月，3月，4月，5月。哪个d3函数检索这些值？

   var x = d3.scaleTime()
        .domain(d3.extent(data, function (d) { return d.date; }))
        .range([0, width]);

    var xAxis = svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(5))

Answer 1

最初，我以this one的重复项结束了您的问题，但第二次认为这不是足够的重复项，因为您正在使用ticks(n)更改刻度数。

因此，解决方案是使用相同的数字来获取报价。就您而言：

var myTicks = x.ticks(5);

这是一个基本演示：

var x = d3.scaleTime()
  .domain([new Date("2017"), new Date("2018")])
  .range([20, 480]);

var axis = d3.axisBottom(x).ticks(5);

var svg = d3.select("svg");

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);

console.log(x.ticks(5))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100"></svg>

请记住，考虑到您问题的标题，我假设您要的是实际的 date对象，而不是轴上的字符串。

我怎么知道轴上显示什么日期？

1 个答案: