Question

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

//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));

这是您更新的小提琴：http://jsfiddle.net/5yqkz1z5/

PS：相应地更改翻译功能中的幻数。

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

1 个答案: