Open dpdonohue opened 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.
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}
Does setting the height attribute help?
height
no it did not help for me
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.
I am using Chrome Version 41.0.2272.118 (64-bit) Code snippets below. Adding CSS did not help.
Here is my data