如何使用d3.time.scale設置日期範圍（）

Question

我的目標非常簡單，我想創建一個使用CSV日期的時間線。然後，我想在此時間線的不同點上繪製圓圈。

Full code

數據

,,Name,First names,s,r,Nat,born,starting point,starting date,arrival date,days,km,Assist,Support,Style,note, 
1,1,KAGGE,Erling,,,Nor,1/15/1963,Berkner Island,11/18/1992,1/7/1993,50,appr. 1300,n,n,solo,first solo unassisted, 
2,2,ARNESEN,Liv,f,,Nor,6/1/1953,Hercules Inlet,11/4/1994,12/24/1994,50,1130,n,n,solo,first woman unassisted, 

我想用是日期[ '起點']

我認爲這個問題是在這裏：我不能確定是什麼域應該看起來像（以及如何查找最小和最大）

var x = d3.time.scale().domain(['11/18/1992', '10/25/2013']).range([0, w]); 

我試圖使用CX

.attr('cx', function(d) { 
     return x(d['starting date']) 
    }) 

代碼

d3.csv("data.csv", function(data) { 

    var cd = data.filter(function(d) { 
    return (d.Style == "solo") 
    }); 

    var de = cd.sort(function(a, b) { 
    return a.days - b.days 
    }) 

    console.log(de) 

    var h = 400; 
    var w = 500; 

    var x = d3.time.scale().domain(['11/18/1992', '10/25/2013']).range([0, w]); 

    var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(10) 

    var svg = d3.select("body").append("svg") 
    .attr("width", w) 
    .attr("height", h) 
    .append("g") 

    svg.append("g") 
    .attr("class", "x axis") 
    .call(xAxis); 

    svg.selectAll('.start') 
    .data(de) 
    .enter() 
    .append('circle') 
    .attr('cx', function(d) { 
     return x(d['starting date']) 
    }) 
    .attr('cy', 10) 
    .attr('r', 5) 
    .style('fill', 'red') 

}) 

Answer 1

我不知道D3將如何迫使你日期字符串成日期，因此我們建議將它們轉換明確地繪製圓。我認爲這應該解決你的問題。

首先在源數據中，例如

var timeFormat = d3.time.format("%m/%d/%Y"); 
    var cd = data.filter(function(d) { 
    return (d.Style == "solo") 
    }) 
    .map(function(d){ 
    d["starting date"] = timeFormat.parse(d["starting date"]); 
    d["arrival date"] = timeFormat.parse(d["arrival date"]); 
    return d; 
    }); 

然後當你創建你的域名相似......

var x = d3.time.scale() 
    .domain([timeFormat.parse('11/18/1992'), timeFormat.parse('10/25/2013')]) 
    .range([0, w]); 

要確定日期的程度自動可以使用d3.array.extent（docs）