D3 时间线 CSV 数据答案

【问题标题】：D3 Timeline CSV DataD3 时间线 CSV 数据
【发布时间】：2015-11-06 20:46:41
【问题描述】：

我正在使用 d3 Timeline 插件 (https://github.com/jiahuang/d3-timeline)，我终于把它放到了可视化项可以读取我的数据的地方。但是，我现在需要使特定学生的所有条目都显示在同一行上。可视化项当前正在分别显示每个条目。

CSV 数据如下所示：

Start,End,Student,Event Type,tooltip
2015-May-27 20:08:15,2015-May-27 20:08:21,Student 338,Pretest,Student 338 spent 00:00:06 on Biological Chemistry test.  Student scored 100%.
2015-May-27 20:08:21,2015-May-27 20:08:30,Student 338,Learning Path,Student 338 spent 00:00:09 on Biological Buffers Website.  
2015-May-27 20:08:30,2015-May-27 20:08:34,Student 338,Learning Path,Student 338 spent 00:00:04 on Organic Molecules Textbook.  
2015-May-27 20:08:34,2015-May-27 20:08:36,Student 338,Learning Path,Student 338 spent 00:00:03 on Nucleic Acid Structure and Function Textbook 2.

viz 文件如下所示：

<script type="text/javascript">
window.onload = function() {

  var width = 800;
  var height = 700;


  var parseDate = d3.time.format("%Y-%b-%d %H:%M:%S").parse; //With parseDate, I define what my time data looks like for d3
  d3.csv("https://dl.dropboxusercontent.com/u/42615722/LeaP/biology-course2.csv", function(d){
    return {
        label : d.Student,
        eventType: d["Event Type"],
        times:[{"starting_time" : parseDate(d.Start),
                "ending_time" : parseDate(d.End)}], //the timeline plugin is looking for a times array of objects with these keys so they must be defined.
        info: d.tooltip
    };
    }, function(data) {
    console.log(data);


    function timelineRect() {

    var colorScale = d3.scale.ordinal().range(['#ed5565','#ffce54','#48cfad','#5d9cec','#ec87c0','#ac92ec','#4fc1e9','#fc6e51','#a0d468','#656d78'])
        .domain(['Pretest','Learning Path','Supplemental Info','Questions','Test Me','Remedial Page','Search Query','Recommended Reading','Search Results','Practice Questions']);
    var chart = d3.timeline()
        .colors( colorScale )
        .colorProperty('event_type')
        .rotateTicks(45)
        .stack(); //necessary to unstack all of the labels

    var svg = d3.select("#timeline1").append("svg").attr("width", width)
      .datum(data).call(chart);
  }
 timelineRect();

  });

    }
  </script>
</head>
<body>

  <div>
    <div id="timeline1"></div>
  </div>

</body>

没有一个示例为此定义域，不幸的是，所有示例数据都以数组形式给出，而不是来自 CSV。如何定义数据，以便具有相同学生标签的每个条目出现在同一时间线行上？

【问题讨论】：

标签： csv d3.js timeline

【解决方案1】：

问题1

您没有对 csv 数据进行分组，可以这样做：我的意思是

//this will do the grouping
   var k = d3.nest()
    .key(function(d) {
      return d.label;
    }).entries(data);
  var b = [];
//this will make it in the format expected by d3 time line
  k.forEach(function(d) {
    var ob = {};
    ob.label = d.key;
    ob.times = [];
    b.push(ob);
    d.values.forEach(function(v) {
      ob.times.push(v.times);//collecting all the times
    });
    ob.times = [].concat.apply([], ob.times);
  });

问题 2

你必须定义刻度格式

  .tickFormat({
    format: d3.time.format("%d-%m"),
    tickTime: d3.time.day,
    tickInterval: 20,
    tickSize: 6
  })

请参阅此 d3 时间 format

您的数据集在几秒钟内非常接近，因此矩形变得非常小..:(我尽我所能将其扩展..祝你好运:)

工作代码here

希望这会有所帮助！

【讨论】：

+1 非常感谢！我是 d3 的超级新手，所以我不知道从哪里开始。也感谢您添加 cmets。