在 d3.js 时间线图表中添加图像而不是点

Question

我有一个时间表，我想在上面放置 icons/images 而不是点。

问题一

我可以添加图片，但我需要根据数据动态添加。

g.selectAll(null)
 .data(temp)
 .enter()
 .append("image")
 .attr({'x':function(d){ console.log(d.x);return xScale(d.x); },
        'y':function(d){ return yScale(d.y); }
 })
 .attr("xlink:href", "Content/Images/1.png");

我有多个图像，从 1.png 到 21.png，因此我需要根据输入数据更改图像。

我该怎么做？

问题二

另一个问题是这是一个时间轴图表，因此当沿 x 轴平移时图像也应该平移，但在我的例子中它是静态的。

如何使我的图像沿 x 轴平移？

我添加了fiddle

编辑：

附上第二个问题的截图

Answer 1

关于第一个问题：

g.selectAll(null)
 .data(temp)
 .enter()
 .append("image")
 .attr('x',function(d){ return xScale(d.x); })
 .attr('y',function(d){ return yScale(d.y); })
 .attr("xlink:href",function(d,i){
   return 'Content/Images/'+i+'.jpg'
 });

上一题：

当 xScale 变化时：

g.selectAll('image')
.attr('x',function(d){ return xScale(d.x); }))

这会更改您的代码：

function zoomed(){
        svg.select('.x-axis').call(xAxis)
        g.selectAll('image').attr('x',function(d){          
            return xScale(d.x); })
        // svg.select('.y.axis').call(yAxis)

}

在 d3.js 时间线图表中添加图像而不是点

Add image in d3.js timeline chart instead of points

javascript

scroll

zooming

d3.js

angularjs