Search code examples
javascriptangularjsd3.jsscrollzooming

Add image in d3.js timeline chart instead of points

I have a timeline chart on which i would like to place icons/images instead of points.

Question 1

I was able to add image but I need to add that dynamically based on the data.

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");

I have multiple images from 1.png to 21.png, so based on the input data I need to change the images.

How do I do so?

Question 2

Another issue is this is a timeline chart so when panning along the x-axis the image should also pan, but in my case it is static.

How to make my image pan along with x-axis?

I have added the fiddle

Edit :

Attached screenshot for second question

Solution

  • about first question:

    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'
 });

    Last question：

    when xScale change:

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

    this change your code:

    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)

    }