d3中的日期格式問題js

Question

我正在D3 js中工作，並試圖呈現多系列折線圖圖表，但我被卡住了爲什麼月1月和8月不顯示在X軸上。 請幫助我需要做的，我想創建一個簡單的7點，3數據系列的圖表，看起來像在下面：

下面是我編輯的代碼示例

 var data = [ 
      { "date": "20140125", "a": "1", "b": "0", "L": "0" }, 
     { "date": "20140225", "a": "2", "b": "0", "L": "0" }, 
     { "date": "20140326", "a": "4", "b": "3", "L": "2" }, 
     { "date": "20140426", "a": "3", "b": "3", "L": "2" }, 
     { "date": "20140527", "a": "2", "b": "3", "L": "3" }, 
     { "date": "20140629", "a": "0", "b": "4", "L": "3" }, 
     { "date": "20140725", "a": "0", "b": "3", "L": "1"}]; 

     var margin = { top: 40, right: 100, bottom: 45, left: 50 }, 
    width = 960 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 



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

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

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

    var color = d3.scale.category10(); 

    var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(d3.time.months, 1) 
     .tickFormat(d3.time.format("%b")); 

    var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

    var line = d3.svg.line() 

    .x(function (d) { return x(d.date); }) 
    .y(function (d) { return y(d.request); }); 


    var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function (d) { 
     return "<strong>Request:</strong> <span style='color:red'>" + d.request + "</span>"; 
    }) 

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


    color.domain(d3.keys(data[0]).filter(function (key) { return key !== "date"; })); 
    svg.call(tip); 
    data.forEach(function (d) { 
     d.date = parseDate(d.date); 
    }); 

    var cities = color.domain().map(function (name) { 
     return { 
      name: name, 
      values: data.map(function (d) { 
       return { date: d.date, request: +d[name] }; 
      }) 
     }; 
    }); 

    //x.domain(d3.extent(data, function (d) { return d.date; })); 
    var myExtent = d3.extent(data, function (d) { return d.date; }); 
    myExtent[0] = d3.time.month(myExtent[0]); 
    x.domain(myExtent); 

    y.domain([ 
    d3.min(cities, function (c) { return d3.min(c.values, function (v) { return v.request; }); }), 
    d3.max(cities, function (c) { return d3.max(c.values, function (v) { return v.request; }); }) 
    ]); 

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

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end"); 


    var city = svg.selectAll(".city") 
     .data(cities) 
    .enter().append("g") 
     .attr("class", "city"); 

    city.append("path") 
     .attr("class", "line") 
     .attr("d", function (d) { return line(d.values); }) 
     .style("stroke", function (d) { return color(d.name); }); 

    city.append("g").selectAll("circle") 
     .data(function (d) { return d.values }) 
     .enter() 
     .append("circle") 
     .attr("r", 3) 
     .attr("cx", function (dd) { return x(dd.date) }) 
     .attr("cy", function (dd) { return y(dd.request) }) 
     .attr("fill", "none") 
     .attr("stroke", "black") 
     .on('mouseover', tip.show) 
    .on('mouseout', tip.hide); 

    city.append("text") 
     .datum(function (d) { return { name: d.name, value: d.values[d.values.length - 1] }; }) 
     .attr("transform", function (d) { return "translate(" + x(d.value.date) + "," + y(d.value.request) + ")"; }) 
     .attr("x", 4) 
     .attr("dy", ".35em") 
     .text(function (d) { return d.name; }); 

Answer 1

您的圖形開始於揚

25日

如果使用地板的一個月，你可以用一個月的顯示刻度開始

var myExtent = d3.extent(data, function (d) { return d.date; }); 
myExtent[0] = d3.time.month(myExtent[0]); 
x.domain(myExtent); 

而且你還可以格式化值（在這種情況下2014顯示的，而不是揚）

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(d3.time.months, 1) 
     .tickFormat(d3.time.format("%b"));