D3：沿日期x轴平移

Question

我试图在x轴上显示日期，同时在滚动时缩放它。

所以，我有这样的代码：

<script type="text/javascript"> 

    var data = [ 
    [{'x':20111001,'y':1},{'x':20111002,'y':6},{'x':20111003,'y':11},{'x':20111004,'y':1},{'x':20111005,'y':2},{'x':20111006,'y':12},{'x':20111007,'y':2},{'x':20111008,'y':3},{'x':20111009,'y':13},{'x':20111010,'y':3}], 
    [{'x':20111001,'y':2},{'x':20111002,'y':2},{'x':20111003,'y':12},{'x':20111004,'y':2},{'x':20111005,'y':3},{'x':20111006,'y':1},{'x':20111007,'y':2},{'x':20111008,'y':7},{'x':20111009,'y':2},{'x':20111010,'y':7}], 
    [{'x':20111001,'y':3},{'x':20111002,'y':10},{'x':20111003,'y':13},{'x':20111004,'y':3},{'x':20111005,'y':12},{'x':20111006,'y':14},{'x':20111007,'y':6},{'x':20111008,'y':1},{'x':20111009,'y':7},{'x':20111010,'y':9}], 
    [{'x':20111001,'y':4},{'x':20111002,'y':4},{'x':20111003,'y':14},{'x':20111004,'y':14},{'x':20111005,'y':10},{'x':20111006,'y':15},{'x':20111007,'y':3},{'x':20111008,'y':0},{'x':20111009,'y':3},{'x':20111010,'y':12}] 
    ]; 

    var colors = [ 
    'steelblue', 
    'green', 
    'red', 
    'purple' 
    ] 

    var b =[]; 


    var parseDate = d3.time.format("%Y%m%d").parse; 

    data.forEach(function (d) { 
     f = d; 
     f.forEach(function(f){ 

      b.push(parseDate(String(f.x))); 
     }) 
    }) 

    var margin = {top: 20, right: 30, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

    var x = d3.time.scale() 
    .domain([d3.extent(b)]) 
    .range([0, width]); 

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

    var xAxis = d3.svg.axis() 
    .scale(x) 
    .tickSize(-height) 
    .tickPadding(10)  
    .tickSubdivide(true)  
    .orient("bottom"); 

    var yAxis = d3.svg.axis() 
    .scale(y) 
    .tickPadding(10) 
    .tickSize(-width) 
    .tickSubdivide(true)  
    .orient("left"); 

    var zoom = d3.behavior.zoom() 
    .x(x) 
    .y(y) 
    .scaleExtent([1, 10]) 
    .on("zoom", zoomed);  



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

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

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

    svg.append("g") 
    .attr("class", "y axis") 
    .append("text") 
    .attr("class", "axis-label") 
    .attr("transform", "rotate(-90)") 
    .attr("y", (-margin.left) + 10) 
    .attr("x", -height/2) 
    .style("text-anchor", "end") 
    .text("Ventas (Miles €)"); 

    svg.append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width) 
    .attr("height", height); 

    var line = d3.svg.line() 
    .interpolate("linear") 
    .x(function(d) { return x(d.x); }) 
    .y(function(d) { return y(d.y); });  

    svg.selectAll('.line') 
    .data(data) 
    .enter() 
    .append("path") 
    .attr("class", "line") 
    .transition() 
    .attr("clip-path", "url(#clip)") 
    .attr('stroke', function(d,i){   
     return colors[i%colors.length]; 
    }) 
    .attr("d", line);  

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


    var points = svg.selectAll('.dots') 
    .data(data) 
    .enter() 
    .append("g") 
    .attr("class", "dots") 
    .attr("clip-path", "url(#clip)"); 

    points.selectAll('.dot') 
    .data(function(d, index){  
     var a = []; 
     d.forEach(function(point,i){ 
      a.push({'index': index, 'point': point}); 
     });  
     return a; 
    }) 
    .enter() 
    .append('circle') 
    .attr('class','dot') 
    .attr("r", 2.5) 
    .attr('fill', function(d,i){  
     return colors[d.index%colors.length]; 
    }) 
    .attr("transform", function(d) { 
     return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; } 
     ).on("mouseover", function(d) {  
      div.transition()   
      .duration(200)  
      .style("opacity", .9);  
      div .html(d.point.x + "K<br/>" + d.point.y) 
      .style("left", (d3.event.pageX) + "px")  
      .style("top", (d3.event.pageY) + "px");  
     })     
     .on("mouseout", function(d) {  
      div.transition()   
      .duration(500)  
      .style("opacity", 0); 
     }) 

     function zoomed() { 
      svg.select(".x.axis").call(xAxis); 
      svg.select(".y.axis").call(yAxis); 
      svg.selectAll('path.line').attr('d', line); 

      points.selectAll('circle').attr("transform", function(d) { 
       return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; } 
       ); 
     } 

    </script> 

我可以用数字来，但不能与日期执行。我已经检查了其他的例子以及它们是如何实现的，但是无法在我的图表中找到编码的方式。

我想知道如何在x轴上显示日期。

Answer 1

是你的问题如何使轴日期，而不是数字？或者它是如何使轴可移动的？如果它是第一个，使用这样的代码：

var x=d3.time.scale() 
    .domain([minDate,maxDate]) 

的的minDate和的maxDate必须javascript Date objects。