diff --git a/src/app/timebars.coffee b/src/app/timebars.coffee index b7477b96275b9c85fd4db9da08fd4b74c8f0bf6b..b2dbf7afd0b3719ad6dfcd03c26b7c59d78bad10 100644 --- a/src/app/timebars.coffee +++ b/src/app/timebars.coffee @@ -24,10 +24,15 @@ speed = -> 500 barWidth = -> - chartWidth() / numBars() + chartHeight() / numBars() -x = d3.scale.linear().domain([ 0, 1 ]).range([ 0, barWidth() ]) -y = d3.scale.linear().domain([ 0, 100 ]).rangeRound([ 0, chartHeight() ]) +x = d3.scale.linear() + .domain([ 9, 91]) + .range([ 0, chartWidth() / 2 ]) + +y = d3.scale.linear() + .domain([ 0, numBars()]) + .rangeRound([ 0, chartHeight() ]) redraw = -> rect = chart.selectAll("rect") @@ -35,10 +40,10 @@ redraw = -> rect.enter() .insert("rect", "line") - .attr("x", (d, i) -> x i + 1 - .5) - .attr("y", (d) -> chartHeight() - y d.value - .5) - .attr("width", barWidth()) - .attr("height", (d) -> y d.value) + .attr "x", chartWidth() / 2 + .attr "y", (d, i) -> y(i) + .5 + .attr("width", (d) -> x(d.value)) + .attr("height", barWidth()) .transition() .ease("linear") .duration(speed()).attr "x", (d, i) -> @@ -47,7 +52,7 @@ redraw = -> rect.transition() .ease("linear") .duration(speed()) - .attr "x", (d, i) -> + .attr "y", (d, i) -> x(i) - .5 rect.exit() @@ -57,7 +62,7 @@ redraw = -> .remove() setupChart = (containerId) -> - data = d3.range(100).map(next) + data = d3.range(numBars()).map(next) setInterval (-> data.shift() @@ -68,24 +73,17 @@ setupChart = (containerId) -> chart = d3.select(containerId) .append("svg") .attr("class", "chart") - .attr("width", barWidth() * data.length - 1) + .attr("width", chartWidth()) .attr("height", chartHeight()) chart.selectAll("rect") .data(data) .enter() .append("rect") - .attr "x", (d, i) -> x(i) - .5 - .attr "y", (d) -> chartHeight() - y d.value - .5 - .attr "width", barWidth() - .attr "height", (d) -> y d.value - - chart.append("line") - .attr("x1", 0) - .attr("x2", barWidth() * data.length) - .attr("y1", chartHeight() - .5) - .attr("y2", chartHeight() - .5) - .style "stroke", "#000" + .attr "x", chartWidth() / 2 + .attr "y", (d, i) -> y(i) + .5 + .attr("width", (d) -> x(d.value)) + .attr("height", barWidth()) window.initTimeBars = (containerId) -> setupChart(containerId)