d3 dynamici c url на основе значений массива - PullRequest
Новая
       86

d3 dynamici c url на основе значений массива

0 голосов
/ 03 февраля 2020

Я пытаюсь добавить URL изображения к элементу SVG, используя D3. Я пробовал разные коды, в том числе и этот. 

svg.append('g')
.selectAll('image')
.data(data)
.enter()
.append('image')
.attr('class', 'countryflag')
.attr('href', `https://www.musiktrends.com/images/countryflags/`

+ 
data.map(yValues)
+
`.png`)

.attr('width', 50)
.attr('height', barHeight)
.attr('x', 0)
.attr('y', yPos)
.attr(`transform', `translate(5,`+0+`)`)
;

Проблема с этим кодом заключается в том, что я получаю все страны в URL. Мне нужна только страна, которая соответствует каждому значению в массиве json.

Вот массив данных: 

data = d3.json('data.json')
.then(data => {data
.forEach(d => {
d.country = d.country;
d.population = +d.population * 1000;
});
render(data);
});

Я также пытался написать функцию, но потому что Я довольно новый в этом, я не мог понять это. Спасибо всем заранее.

Ответы [ 2 ]

0 голосов
/ 04 февраля 2020

Спасибо, Мута. Это то, что я в итоге сделал, и, кажется, работает нормально:

Данные: 

data = d3.json('data.json')
.then(data => {data
.forEach(d => {
    d.country = d.country;
  d.population = +d.population * 1000;
  d.flagurl = `../images/countryflags/`+d.country+`.png`;
});

console.log(data);
render(data);
});

const yPos = d => yScale(yValues(d));

Изображение 

svg.append('g')
.selectAll('image')
.data(data)
.enter()
.append('image')
.attr('class', 'countryflag')

.attr('href', d => (d.flagurl))

.attr('width', 50)
.attr('height', 0.8*barHeight)
.attr('x', 0)
.attr('y', yPos)
.attr('opacity', 0)
.attr('transform', `translate(`+0.05*barHeight+`,`+0.1*barHeight+`)`)

// transition and delay         
.transition()
//.attr ('y', yPos)
.attr ('opacity', 1)
//.attr('height', yScale.bandwidth())

.duration(animateDuration-625)
.delay(delay+animateDuration+375)
;
0 голосов
/ 03 февраля 2020

Чтобы создать флаг URL, вы отображаете функцию yValues в массиве data. Можете ли вы показать, что он делает?

Если вам нужен URL pre country, вам не следует использовать .map в построении URL, а делать oop вокруг всего svg. ... call.

Также обратите внимание, что на .attr(`transform', `translate(5,`+0+`)`) вы используете различные типы кавычек вокруг transform.

...