D3.js 当日期在日、月或年之间变化时，根据折线图中的数字绘制日期

我有一个json数据，它包含日期和数字。日期从天到月到年不等。如何绘制图表，使日期根据收到的数据自动调整？如果不提供任何记号计数，则x轴上的记号标签开始重叠

这是折线图的代码

 var createLineChart = function(data){
    var convertToISODate = function(d) {
      return new Date(d.date);
    }

    // get max and min dates, provided data is in sorted order
    var minDate = convertToISODate(data[0]),
        maxDate = convertToISODate(data[data.length-1]);

    var minAccuracy = d3.min(data, function(d) {
      return (d.ad_review_stats.accuracy);
    });
    var maxAccuracy = d3.max(data, function(d) {
      return (d.ad_review_stats.accuracy);
    });
    var differenceInAccuracy = (maxAccuracy - minAccuracy)/2;

    var formatYAxis= d3.format('.2f');
    var formatXAxis = d3.time.format("%d-%b-%y");
    var d3Graph = d3.select("#lineGraph"),
      widthOfGraph = 400,
      heightOfGraph = 200,
      marginsForGraph = {
          top: 20,
          right: 20,
          bottom: 20,
          left: 50
      },
      xScale = d3.time.scale().
              range([marginsForGraph.left, widthOfGraph - marginsForGraph.right]).
              domain([minDate, maxDate]),

      yScale = d3.scale.linear().
              range([heightOfGraph - marginsForGraph.top, marginsForGraph.bottom]).
              domain([(minAccuracy - differenceInAccuracy), 
                (maxAccuracy + differenceInAccuracy)]);

      xAxis = d3.svg.axis()
        .scale(xScale)
        .tickFormat(formatXAxis),

      yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .tickFormat(formatYAxis);

    d3Graph.append("svg:g")
      .attr("transform", "translate(0," + (heightOfGraph - marginsForGraph.bottom) + ")")
      .call(xAxis);

    d3Graph.append("svg:g")
    .attr("transform", "translate(" + (marginsForGraph.left) + ",0)")
    .call(yAxis);

    var lineGeneratorFunction = d3.svg.line()
      .x(function(d) {
        return xScale(convertToISODate(d));
      })
      .y(function(d) {
        return yScale(Math.round(d.ad_review_stats.accuracy * 100) / 100);
      })
      .interpolate("cardinal");

    var divForTooltip = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

    d3Graph.append('svg:path')
      .attr('d', lineGeneratorFunction(data))
      .attr('stroke', 'rgb(44, 160, 44)')
      .attr('stroke-width', 4)
      .attr('fill', 'none');

    d3Graph.selectAll("circle.line")
      .data(data)
      .enter().append("svg:circle")
      .attr("class", "line")
      .style("fill", "rgb(44, 160, 44)")
      .attr("cx", function(d) { 
        return xScale(convertToISODate(d)) 
      })
      .attr("cy", function(d) { 
        return yScale(d.ad_review_stats.accuracy);
      })
      .attr("r", 2)

      .on("mouseover", function(d) {
          d3.select(this).transition()
            .duration(200)
            .attr("r", 8);

          divForTooltip.transition()        
              .duration(200)      
              .style("opacity", .9);      
          divForTooltip.html(d.ad_review_stats.accuracy + ", "  + d.date)  
              .style("left", (d3.event.pageX) + "px")     
              .style("top", (d3.event.pageY - 28) + "px");    
          })                  
      .on("mouseout", function(d) {  
          d3.select(this).transition()
          .duration(200)
          .attr("r", 2);   

          divForTooltip.transition()        
            .duration(500)      
            .style("opacity", 0);   
      });
  };

你可以在这里看到小提琴演奏：

---

任何帮助都将不胜感激。

我不确定您在这里的具体要求是什么：只是为了更改记号的数量或记号标签的显示方式，还是为了实际过滤特定日期范围内的图表，还是其他什么？@HenryS:问题是，随着数据中条目数的增加，标签开始重叠。如果出现这种情况，我希望减少刻度的数量，以避免标签重叠。我认为您可以选择使用

axis.ticks（#）

来指定（近似）固定数量的轴刻度，而不考虑域，或者旋转x轴标签以获得更好的可见性。这两个方面的例子如下：