D3 LineGraph Circles Remove Overlap && Sort dates
문제
http://www.fabieno.com/conanbatt/index.html
Circles are overlapping, and because they have tooltips. This is a bit of a pain. How can I modify this to stop the overlap?
Also, how do I format the dates in to a way I would prefer to see them? For instance vertical and YYYY/dd/mm
https://github.com/FabienO/OpenKaya-1/tree/master/widgets/rank_graph
Any help would be much appreciated. Thanks.
해결책
Regarding the overlapping circles -- assuming you'd like their position on the X-axis to accurately represent the time of day their game took place -- as I see it you have two options.
In chart.js:
1) make the graph wider:
// line 101
var w = $(that.html).parent().width() || 500; //Sometimes this is 0, dont know why.
2) make the radius of each circle smaller.
// line 120
var pointRadius = 2;
As a bonus, I suggest adding a fill color to each circle:
// line 244, replace circles.enter() with the following
circles
.enter()
.append('svg:circle')
.attr('class', 'data-point')
.style('opacity', 1e-6)
.attr('cx', function(d) { return x(d.date) })
.attr('cy', function() { return y(0) })
.attr('r', function() { return (data.length <= maxDataPointsForDots) ? pointRadius : 0 })
// On hover, fill the circle
.on('mouseover', function(d, i) {
circles.filter(function(p) {
return d === p;
})
.style('fill', 'steelblue');
})
// Clear the fill
.on('mouseout', function(d, i) {
circles.filter(function(p) {
return d === p;
})
.style('fill', 'white');
})
.transition()
.duration(transitionDuration)
.style('opacity', 1)
.attr('cx', function(d) { return x(d.date) })
.attr('cy', function(d) { return y(d.value) });
Regarding the date format for the X-axis labels:
// line ~124
var xAxis = d3.svg.axis().scale(x).tickSize(h - margin * 2).tickPadding(10).ticks(7).tickFormat(d3.time.format('%Y/%d/%m'));
To rotate them:
// line ~151
// x ticks and labels
if (!xAxisGroup) {
xAxisGroup = svg.append('svg:g')
.attr('class', 'xTick')
.call(xAxis);
xAxisGroup.selectAll('text')
.attr('transform', 'translate(-210, 140) rotate(-45)');
}
else {
t.select('.xTick').call(xAxis);
}
I forked your repo and opened a pull against it so you can see all the changes at once: https://github.com/FabienO/OpenKaya-1/pull/1