CODEWITHSUNDEEP
javascriptd3.js
The Old County
The Old County

Reputation: 89

d3v4 timeline adding a date axis to the bottom?

I have refactored this timeline chart for d3v4. I am unsure though how to add dates to to the bottom to indicate the timeline.

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

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

its based on this old timeline code - but again didn't have an labelled axis. http://bl.ocks.org/bunkat/2338034

this example calls an axis..

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

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

is this a sound solution?

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

Upvotes: 0

Views: 367

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

In D3 we normally call axis the variable referring to the axis generator, not to the group that contains it. Other than that, this is indeed the most common way to call the axis:

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

Here is your updated fiddle: http://jsfiddle.net/5yqkz1z5/

PS: change the magic numbers in the translate function accordingly.

Upvotes: 1

Related Questions