javascript - d3v4 时间线在底部添加日期轴？

Question

我重构了 d3v4 的时间线图表。我不确定如何将日期添加到底部以指示时间线。

http://jsfiddle.net/0ht35rpb/179/

//scales
var x =  d3.scaleTime()
        .range([0, w])              
        .domain([timeBegin, timeEnd]);

它基于这个旧的时间线代码 - 但同样没有标记轴。 http://bl.ocks.org/bunkat/2338034

此示例调用轴..

https://github.com/jiahuang/d3-timeline

   var axis = g.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + 0 + "," + yPosition + ")")
        .call(xAxis);
    };

这是一个合理的解决方案吗？

  g.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + 0 + "," + (margin.top + (itemHeight + itemMargin) * maxStack) + ")")
    .attr(timeAxisTickFormat.stroke, timeAxisTickFormat.spacing)
    .call(xAxis.tickFormat("").tickSize(-(margin.top + (itemHeight + itemMargin) * (maxStack - 1) + 3), 0, 0));

Answer 1

在D3中，我们通常将axis称为指代轴生成器的变量，而不是指包含它的组。除此之外，这确实是调用轴的最常见方法:

var gX = chart.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + 140 + "," + 450 + ")")
    .call(d3.axisBottom(x));

这是您更新的 fiddle :http://jsfiddle.net/5yqkz1z5/

PS:相应地更改翻译函数中的魔数(Magic Number)。