D3時間表CSV數據

我正在使用d3時間軸插件（https://github.com/jiahuang/d3-timeline），並且我終於知道它可以讀取我的數據。但是，我現在需要做到這一點，以便特定學生的所有參賽作品都顯示在同一行上。即當前分開顯示每個條目。D3時間表CSV數據

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.

的即文件看起來是這樣的：

<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中。我如何定義數據，以便每個具有相同學生標籤的條目出現在同一個時間軸行上？

來源

2015-11-06 K. Anthony

問題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

希望這有助於！

來源

2015-11-07 03:12:40 Cyril

+1非常感謝！我對d3超級新，所以我不知道從哪裏開始。感謝您也添加了評論。 –

D3時間表CSV數據

回答

相關問題