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

Question

我有一个时间线图表，我想在上面放置图标/图像而不是点。

问题1

我能够添加图像，但我需要根据数据动态添加该图像。

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 的多个图像，因此我需要根据输入数据更改图像。

我该怎么做？

问题2

另一个问题是这是一个时间线图表，因此当沿 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)

}