D3 - align leftmost side of circle to x-axis time scale

Question

I'm trying to make a timeline where the:

circle radius = visit duration

x-position = time of visit

.attr('cx', function(d,i) { /* insert code here */ } )

basically what I want is tell d3 to align the circle to "startDate", however there's a problem with this as circles with bigger radii will shift towards the left, making it look inaccurate since it's aligned to the center.

what are possible solutions for this?

here's the code: http://jsfiddle.net/jg4v1ymx/2/

edit - instead of the radius: if data is bigger, tell d3 to increase circle size by diameter? the problem is I don't want big radii circles overlap with circles in nearby dates

Answer 1

You just need to pass the x scale the date, as in:

.attr('cx', function(d,i) { 
    return x(d.date);
 } )

You also need to make sure that you have set the domain before you do this, so move the x.domain(/*stuff*/) above the chart1 line.

You can see a working fiddle