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

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

在 d3.js 中绘制具有重复图像模式的时间线图

Plot timeline graph with repetitive image patten in d3.js

javascript

dojo

d3.js