jiahuang / d3-timeline

Simple JS timeline plugin for d3
1.04k stars 281 forks source link

x axis labels truncated at bottom #47

Open dpdonohue opened 9 years ago

dpdonohue commented 9 years ago

I am having a problem that my x axis labels are truncated. I can only see the top 5 pixels approximately. So the words are cut off, see screenshot.
image

I am using Chrome Version 41.0.2272.118 (64-bit) Code snippets below. Adding CSS did not help.

<div class="biolog-timeline">
        <svg id="timeline" width="100%"></svg>
    </div>
.biolog-timeline {
    width: 1200px;
    margin-bottom: 100px;
}
#timeline {
    margin-bottom: 100px;
}
Template.timeline.rendered = function() {
    timelineChart = d3.timeline()
        .stack()
        .tickFormat({
            format: d3.time.format("%-m/%y"),
            tickTime: d3.time.months,
            tickInterval: 1,
            tickSize: 5
        })
        .itemHeight(15)
        .margin({left:100, top: 0, right: 0, bottom: 200})
        .orient("bottom")
        .width(1200);
};
Tracker.autorun(function () {
    var timelineDataObj = getTimelineData();
    //console.log("timeline Tracker.autorun: timelineChart?" + (! timelineChart) + "; timelineDataObj=" + JSON.stringify(timelineDataObj));
    if (!timelineChart) return;

    timelineChart.beginning(timelineDataObj.beginning);
    timelineChart.ending(timelineDataObj.ending);

    if (!timelineDataObj.data || !timelineDataObj.data.length) return;
    console.log("PLOTTING: " + JSON.stringify(timelineDataObj));
    var svg = d3.select("#timeline")
        .append("svg")
        .attr("width", "800")
        .datum(timelineDataObj.data)
        .call(timelineChart);
});

Here is my data

PLOTTING: {"data":[{"id":"edb6076fab7b392dfbb4a177","label":"Chest pain (started 4/13)","times":[{"starting_time":1423583272059,"ending_time":1429599600000}]},{"id":"653fac290920a5bebfb8141f","label":"Diabetes type 2 (started 3/15)","times":[{"starting_time":1427698800000,"ending_time":1430550000000}]},{"id":"c279492f8260d0d680457710","label":"Benign Essential hypertension (HTN) (started 3/15)","times":[{"starting_time":1427698800000,"ending_time":1430463600000}]},{"id":"849525affdbd3e916b6294f5","label":"Hypoglycemia (low blood sugar) (started 3/15)","times":[{"starting_time":1427785200000,"ending_time":1430550000000}]},{"id":"7fa3bc97eaec7dc90c089769","label":"History of heart attack (started 4/15)","times":[{"starting_time":1428811200000,"ending_time":1429070400000}]},{"id":"b8f02798aa6367eb7722eef4","label":"Dyspnea (shortness of breath) on exertion (started 3/15)","times":[{"starting_time":1425186000000,"ending_time":1428842762059}]}],"beginning":1423583272059,"ending":1430550000000}
jiahuang commented 9 years ago

Does setting the height attribute help?

dpdonohue commented 9 years ago

no it did not help for me