什么是为dc.js气泡图创建日期 - 时间轴的正确方法？

通过使用dc.js气泡图表来挣扎。什么是为dc.js气泡图创建日期 - 时间轴的正确方法？

我的目标是让X轴成为日期/时间线。我有下面的代码，这与线性X正常工作，但说明不了什么用的日期/时间：

http://jsfiddle.net/eugene_goldberg/LL41xxho/13/

<body> 
    <div class="container"> 
     <div class="row"> 
      <div id="bubble-chart" class="dc-chart"> 
       <div class="clearfix"></div> 
      </div> 
     </div> 
    </div> 
</body> 

var data = [ 
     {date: "12/27/2012", label: "a1", x: 2, y: 190, bubble: 5}, 
     {date: "12/28/2012", label: "a2", x: 2, y: 10, bubble: 5}, 
     {date: "12/29/2012", label: "a3", x: 95, y: 300, bubble: 10}, 
     {date: "01/04/2013", label: "a9", x: 51, y: 90, bubble: 1}, 
     ]; 

var ndx = crossfilter(data); 

var parseDate = d3.time.format("%m/%d/%Y").parse; 
data.forEach(function(d) { 
    d.date = parseDate(d.date); 
}); 

var dateDim = ndx.dimension(function(d) {return d.date;}); 
var xDim = ndx.dimension(function(d) {return d.x;}); 

var dateGroup = dateDim.group().reduce(
    function(p, v) { 
     ++p.count; 
     p.label = v.label; 
     p.bubble = v.bubble; 
     p.x = v.x; 
     p.y = v.y; 

     return p; 
    }, 
    function(p, v) { 
     --p.count; 
     p.bubble = 0; 
     p.label = ""; 
     p.x = 0; 
     p.y = 0; 

     return p; 
    }, function() { 
     return { count: 0, x: 0, y:0, label: "" }; 
    }); 

var minDate = dateDim.bottom(1)[0].date; 
var maxDate = dateDim.top(1)[0].date; 
var xRange = [-10, d3.max(dateGroup.all(), function(d) { return d.value.x + d.value.bubble*2; }) ], 
    yRange = [-10, d3.max(dateGroup.all(), function(d) { return d.value.y + d.value.bubble*2; }) ]; 


var bubbleChart = dc.bubbleChart("#bubble-chart"); 
//debugger; 
bubbleChart 
    .dimension(dateDim) 
    .group(dateGroup) 
//    .x(d3.time.scale() 
//     .domain([minDate, maxDate]) 
    //     .nice(d3.time.day) 
        //.range(xRange)) 
    //     ) 
    .x(d3.scale.linear().domain(xRange)) 
    .y(d3.scale.linear().domain(yRange)) 

    .width(400) 
    .height(400) 
    .yAxisPadding(50) 
    .xAxisPadding(50) 
    .xAxisLabel('X') 
    .yAxisLabel('Y') 
    .label(function (p) { 
     return p.value.label; 
    }) 
    .renderLabel(true) 
    .title(function (p) { 

     return [ 
       "x: " + p.value.x, 
       "y: " + p.value.y, 
       "Bubble: " + p.value.bubble, 
       ] 
       .join("\n"); 
    }) 
    .renderTitle(true) 
    .renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false 
    .renderVerticalGridLines(true) 
    .maxBubbleRelativeSize(0.3) 
    .keyAccessor(function (p) { 

     return p.value.x; 
    }) 
    .valueAccessor(function (p) { 
     return p.value.y; 
    }) 
    .radiusValueAccessor(function (p) { 
     return p.value.bubble; 
    }); 
dc.renderAll();

我已经经历了同样类似的讨论看这里，但没有找到回答。

在我的小提琴中，我有51到55行注释掉，这是我在时间轴上的尝试。下面的行有.x作为d3.linear，并且正常工作。

我该如何正确做到这一点，我的时间范围是我的.x？

来源

2016-03-02 Eugene Goldberg