D3.js D3线图圆消除重叠&&；排序日期

圆是重叠的，因为它们有工具提示。这有点痛。如何修改此选项以停止重叠

此外，我如何将日期格式化为我希望看到它们的方式？例如垂直和YYYY/dd/mm

---

任何帮助都将不胜感激。谢谢。

关于重叠的圆圈——假设您希望它们在X轴上的位置能够准确地表示比赛发生的时间——在我看来，您有两种选择

在chart.js中：

1） 使图表更宽：

// line 101
var w = $(that.html).parent().width() || 500; //Sometimes this is 0, dont know why.

2） 使每个圆的半径变小

// line 120
var pointRadius = 2;

作为奖励，我建议为每个圆添加填充颜色：

// 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) });

要旋转它们，请执行以下操作：

// 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);
}

我分叉了你的回购协议，并对其进行了拉动，这样你就可以一次看到所有的变化：

// 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);
}