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

Posted 2021-05-04

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

问题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

编辑：

第二个问题的附加截图

答案

关于第一个问题：

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)

}