Javascript D3 JS-在同一点上绘制所有数据，除非图形非常宽

我使用以下代码从数据库中提取数据，然后将其绘制在D3SVG画布上。我需要能够显示以下格式的数据：半小时，每小时，每天，每周，每月和每年。此刻，除了两个最小的外，所有的机器都运转良好

当向图形中添加太多数据时，所有内容都开始在相同的X坐标上打印

    <script>

function buildChart(groupby) {

    $('.svg-container').find('svg').empty();

    // Set the dateformat for the X axis and the dateFormat for the ticks
    if (groupby == '2') {
        var dateFormatPattern = '%Y';
        var tickFormatPattern = '%Y';
    } else if (groupby == '3') {
        var dateFormatPattern = '%B';
        var tickFormatPattern = '%B';
    } else if (groupby == '4') {
        var dateFormatPattern = 'Week %U';
        var tickFormatPattern = 'Week %U';
    } else if (groupby == '5') {
        var dateFormatPattern = '%b %d';
        var tickFormatPattern = '%b %d';
    } else if (groupby == '6') {
        var dateFormatPattern = '%b %d';
        var tickFormatPattern = '%c';
    }

    var margin = {top: 60, right: 20, bottom: 30, left: 60},
        width = $('.svg-container').width() - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .2);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(function(d) { return d3.time.format(dateFormatPattern)(new Date(d)); });

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5)
        .tickFormat(function(d) { return d + " kWh" });

    var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        // Format the date of the highlighted bar to output it consistently
        var formattedDate = d3.time.format(tickFormatPattern)(new Date(d.date));
        var tooltip_content = "<strong>Date:</strong> <span style='color: steelblue;'>" + formattedDate + "</span><br/>";
        tooltip_content += "<strong>Consumption:</strong> <span style='color:steelblue'>" + d3.format(".2f")(d.value) + " kWh</span>";
        return tooltip_content;
      })

    var svg = d3.select(".svg-container svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.call(tip);

    /****
    *
    * Get the data
    *
    ****/

    $.post('http://127.0.0.1/data/getData.php?DanChart', {request:'{"electric":[{"id":"12"}]}', filters:'{"date":["range", "2013-11-05", "", "2013-11-12"], meter:[1], houseId2:[5]}', groupby: groupby}, function (data) {

      x.domain(data.map(function(d) { return d.date; }));
      y.domain([0, d3.max(data, function(d) { return Math.max(d.value); })]);

      console.log(data);

      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);

      svg.selectAll(".bar")
          .data(data)
        .enter().append("rect")
          .attr("class", function(d) { 
            var day = new Date(d.date);
            console.log(day);
            if (day.getDay()%6==0 && groupby == '5') {
                return "bar weekend";
            } else {
                return "bar";
            }
          })
          //.attr("class", "bar")
          .attr("x", function(d) { return x(d.date); })
          .attr("width", x.rangeBand())
          .attr("y", function(d) { return y(d.value); })
          .attr("height", function(d) { return height - y(d.value); })
          .on('mouseover', tip.show)
          .on('mouseout', tip.hide);

        // How many ticks are there?
        var numberOfTicks = data.length;
        // Work out the longest length of any tick
        var tickLength = 0;
        $(".svg-container").find('.x .tick').each(function(){
            if($(this)[0].getBBox().width > tickLength){
                tickLength = $(this)[0].getBBox().width;
            }
        });

        // Add some padding
        tickLength = tickLength + 10;

        // How many ticks could possibly fit across the X axis
        var maximumTicks = (width/tickLength);
        // Work out which occurance of tick should be shown. 
        // E.g. if tickRatio = 2, every other tick will be shown, starting from the first tick
        // So ticks 1,3,5,7 and so on will be visible and the others are hidden to prevent overlapping
        var tickRatio = Math.ceil(numberOfTicks/maximumTicks);

        // console.log('tickratio',tickRatio);
        // console.log('noofticks',numberOfTicks);
        // console.log('maximumTicks',maximumTicks);

        // Use CSS selectors to calcuate which ticks need hiding, and give them the class hidden-tick       
        if (tickRatio > 1) {
            $('.svg-container').find('.x .tick:not(:nth-child('+tickRatio+'n+1))').attr('class','tick hidden-tick');
        }

    });

}

/****
*
* Build initial chart, 5 is for daily records
*
****/

buildChart('6');

</script>

致：

因此，画布非常宽，数据将很好地拟合并绘制在正确的位置

有人能告诉我我做错了什么，以及如何用原始宽度拟合图表上的所有数据吗

我为每小时事务提取的日期示例如下：

Thu Aug 22 2013 19:19:27 GMT+0100 (BST)
Thu Aug 22 2013 20:00:57 GMT+0100 (BST)
Thu Aug 22 2013 21:00:38 GMT+0100 (BST)
Thu Aug 22 2013 22:00:21 GMT+0100 (BST)
Thu Aug 22 2013 23:00:51 GMT+0100 (BST)
Fri Aug 23 2013 00:00:58 GMT+0100 (BST)
Fri Aug 23 2013 01:00:01 GMT+0100 (BST)
Fri Aug 23 2013 02:00:35 GMT+0100 (BST)
Fri Aug 23 2013 03:00:18 GMT+0100 (BST)
Fri Aug 23 2013 04:00:59 GMT+0100 (BST)
Fri Aug 23 2013 05:00:03 GMT+0100 (BST) 

---

感谢您的帮助

有没有可能因为数据点太多而无法分散？是的，这可能是问题所在，我有没有办法绕过它？显示更少的数据点，即以某种方式聚合？我想我会这样做，以便用户一次只能查看X天。例如，问题是他们是否想将3个月的数据与另外3个月的数据进行比较。D3可以绘制所有数据，然后让用户平移，这样就不会一次看到所有数据了吗？你的意思是这样的吗？

width = 5000 - margin.left - margin.right,

Thu Aug 22 2013 19:19:27 GMT+0100 (BST)
Thu Aug 22 2013 20:00:57 GMT+0100 (BST)
Thu Aug 22 2013 21:00:38 GMT+0100 (BST)
Thu Aug 22 2013 22:00:21 GMT+0100 (BST)
Thu Aug 22 2013 23:00:51 GMT+0100 (BST)
Fri Aug 23 2013 00:00:58 GMT+0100 (BST)
Fri Aug 23 2013 01:00:01 GMT+0100 (BST)
Fri Aug 23 2013 02:00:35 GMT+0100 (BST)
Fri Aug 23 2013 03:00:18 GMT+0100 (BST)
Fri Aug 23 2013 04:00:59 GMT+0100 (BST)
Fri Aug 23 2013 05:00:03 GMT+0100 (BST)