d3.js 缩放、轴和自定义刻度答案

【问题标题】：d3.js scales, axis, and customizing ticksd3.js 缩放、轴和自定义刻度
【发布时间】：2018-06-25 11:34:35
【问题描述】：

我正在尝试在条形图中的 x 轴上显示自定义刻度而不是默认文本。到目前为止，我已经想出了如何在每个 g 元素（'.tick'）中放置一个 html 元素，但我无法想出如何从我的 dummyData 中获取每个元素并按如下方式使用它：

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

【问题讨论】：

标签： javascript d3.js frontend bar-chart axis

【解决方案1】：

我有一个解决方案。重点是用foreignObject解析和数据更新，而不是数据输入。

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

【讨论】：