d3.js шкалы, оси и настройки тиков - PullRequest
Новая
       24

d3.js шкалы, оси и настройки тиков

0 голосов
/ 25 июня 2018

Я пытаюсь отобразить настроенные галочки вместо текста по умолчанию на оси х в моей гистограмме.До сих пор я выяснил, как поместить элемент html в каждый элемент g ('. Tick'), но я не могу придумать, как получить каждый элемент из моего 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')

1 Ответ

0 голосов
/ 25 июня 2018

У меня есть решение. Ключевыми моментами были анализ с 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')
...