d3.js scales, axis, and customizing ticks

Question

I am trying to display customized ticks instead of default texts on the x axis in my bar graph. So far I have figured out how to put a html element in each g element('.tick'), but I can't come up with how to get each element from my dummyData and use it as below:

x = d3.scaleBand().rangeRound([0, width]).paddingInner(0.1);
xAxis = d3.axisBottom(this.x).ticks(10);

x.domain(dummyData.map( d => d.name ));

    svg
    .append('g')
        .attr('class', 'x axis')
        .attr('transform', `translate( 0 , ${height})`)
        .call(xAxis)
    .selectAll('.tick')
    .append('foreignObject')
    .append('xhtml:div'))
        .style('background-image', d => `url(${d.imgUrl})`)
        .style('background-size','30px')
        .style('background-repeat', 'no-repeat')

Answer 1

I got a solution. The key points were parsing with foreignObject and data update instead of data enter.

svg
select('.x.axis')
.selectAll('.tick')
.data(dummyData)
.append('foreignObject')
.append('xhtml:div'))
    .style('background-image', d => `url(${d.imgUrl})`)
    .style('background-size','30px')
    .style('background-repeat', 'no-repeat')