在d3.js中繪製具有重複圖像圖案的時間線圖

Question

我對d3.js非常陌生。我需要用時間線實現一個水平條。該欄的內容將是一系列圖像模式。

任何人都可以幫助我找到實現該方法，最好使用d3.js？

請找到附圖。

Answer 1

我不會給一個完整的答案，只是一個可能的骨架（其他選項）

說你有你的數據對（時間，事件）的列表，並匹配的事件的圖像列表：

var data = [{duration:15, event:0}, 
      {duration:5, event:1}, 
      {duration:25, event:0}, 
      ... 
      ]; 
var img = ["black.png", "colorbar.png", ...]; 
var width = 25; //width of a frame 
var scale = 4; //time units per frame 

，你可以做以下，以獲得條開始和結束位置，以及幀列表：

var x=0; 
var frames=[]; 
data.forEach(function(d) { 
    d.position = x; 
    var nFrames= Math.ceil(d.duration/scale); 
    for (var i=0; i<nFrames; i++) { 
    frames.push({event: d.event, position:x});  
    x+=width; 
    } 
}) 

個

框架會是什麼樣子：[{event:0, position:0}, {event:0,position:25}, ...]

現在你需要插入相應的圖像：基本是這樣的：

d3.select("svg") 
    .selectAll(".frame") 
    .data(frames) 
    .enter() 
    .append("image") 
    .attr("class", "frame") 
    .attr("x",function(d){return d.position}) 
    .attr("y",0) 
    .attr("xlink:href",function(d){return img[d.event]}); 

這應該給你已經是一個良好的開端，現在你可以試試蜱蟲和自己的傳說:)