[英]D3 - align leftmost side of circle to x-axis time scale
I'm trying to make a timeline where the: 我正在尝试制作一个时间表,其中:
circle radius = visit duration 圆半径=访问持续时间
x-position = time of visit x位置=访问时间
.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. 基本上我要告诉d3将圆与“ startDate”对齐,但是这有一个问题,因为半径较大的圆会向左移动,因为它与中心对齐,因此看起来不准确。
what are possible solutions for this? 有什么可能的解决方案?
here's the code: http://jsfiddle.net/jg4v1ymx/2/ 这是代码: http : //jsfiddle.net/jg4v1ymx/2/
edit - instead of the radius: if data is bigger, tell d3 to increase circle size by diameter? 编辑-而不是半径:如果数据更大,告诉d3通过直径增加圆的大小? the problem is I don't want big radii circles overlap with circles in nearby dates 问题是我不希望大半径圆与附近日期的圆重叠
You just need to pass the x scale the date, as in: 您只需要传递x标度日期即可,如下所示:
.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. 你还需要确保你已经设置的域名在这之前,所以移动x.domain(/*stuff*/)
以上chart1
线。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.