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

这应该已经给你一个良好的开始，现在你可以自己尝试刻度和图例:)