Question

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

output = diff([0,input])>0;

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

d3.js缩放比例，轴和自定义刻度

1 个答案: