绘制时间线图与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]});

这应该给你一个良好的开端，现在你可以自己尝试滴答声和传说：）