在d3.js中绘制带有重复图像图案的时间线图

Question

I am very much new to d3.js. I need to implement a horizontal bar with timeline. And the content of the bar would be a sequence of image pattern.

Can anyone help me to find the way to implement that, preferably using d3.js?

Please find the attached picture.

Answer 1

I'm not going to give a full answer, just a possible skeleton (among other options)

Say you have your data as a list of pairs (duration, event), and a list of images matching the events:

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

you can do the following to get the strips start and end positions, as well as a list of frames:

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; 
   }
})

frames would look like: [{event:0, position:0}, {event:0,position:25}, ...]

Now you need to insert the corresponding images: the basic is the following:

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]});

This should give you a good start already, now you can try the ticks and the legend by yourself :)