Search code examples
javascriptjqueryd3.jstimeline

d3 timeline make axis fragmented (color-code) based on time offset

I am using d3-timeline.js (https://github.com/jiahuang/d3-timeline/blob/master/README.md) to buildenter image description here this:

Currently, the timeline's axis looks like this:

enter image description here

Now, I want the axis to be a little broader to be able to make it look like this:

enter image description here

How can I achieve that?

this is my code:

 var data = [
            {label: "person a", "color": "red", times: [
                {"starting_time": 1355752800000, "ending_time": 1355759900000},
                {"starting_time": 1355767900000, "ending_time": 1355774400000}
            ]},
            {label: "person b", "color": "green", times: [
                {"starting_time": 1355759910000, "ending_time": 1355761900000}
            ]},
            {label: "person c", "color": "blue", times: [
                {"starting_time": 1355761910000, "ending_time": 1355763910000}
            ]},
          ];

var chart = d3.timeline()
            .stack() // toggles graph stacking
            .margin({left:70, right:30, top:0, bottom:0});

        var svg = d3.select(target)
        .append("svg")
        .attr("width", 500)
        .datum(data)
        .call(chart);
Solution

  • The easiest solution was to add a background image to the SVG element and position it correctly.