Question

我的目标非常简单，我想使用CSV中的日期创建时间轴。然后我想在这个时间轴上的不同点绘制圆圈。

数据

,,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,

我想使用的日期是[＆＃39;起点＆＃39;]

我认为问题在于：我不确定域应该是什么样的（以及如何找到最小值和最大值）

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）

使用d3.time.scale（）时如何设置日期范围

1 个答案: