d3. js числовой формат не отображается должным образом на панели - PullRequest
Новая
       59

d3. js числовой формат не отображается должным образом на панели

0 голосов
/ 31 января 2020

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

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

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

});

const xValuesNumberFormat = number => d3.format(',.0f')(number);

const xValues = d => d.population;

svg.selectAll('text')
.data(data)
.enter()
.append('text')
.attr('class', 'bar-value')
.attr('x', xPos)
.attr('y', yPos)
.text(xValues)
.attr('transform',`translate(5,`+yScale.bandwidth()/1.5+`)`)
        ;



[
{"country":"China","population":1415046},
{"country":"India","population":1354052},
{"country":"United States","population":326767},
{"country":"Indonesia","population":266795},
{"country":"Brazil","population":210868},
{"country":"Pakistan","population":200814},
{"country":"Nigeria","population":195875},
{"country":"Bangladesh","population":166368},
{"country":"Russia","population":143965},
{"country":"Mexico","population":130759}
]


svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('class', 'rect')
//.attr('x', xPos)
.attr('y', yPos)
.attr('width', xPos)
.attr('height', yScale.bandwidth())

.on('mouseover', function (d)
 {tooltip.style('display', null);})

.on('mouseout', function (d)
{tooltip.style('display', 'none');})

.on('mousemove', function (d)
{
var xPos = d3.mouse(this)[0] ;
var yPos = d3.mouse(this)[1] - 20;
tooltip.attr("transform", "translate("+xPos + "," + yPos +")");
tooltip.select('text').text(d3.format(',.0f')(d.population));
})
;

Как только я пытаюсь отформатировать его, я получаю Nan, неопределенные и другие ошибки.

введите описание изображения здесь

Как вы можете видеть на картинке, я хочу, чтобы число рядом со строкой было отформатировано так же, как число в строке. В основном, я просто хочу разделители запятых. Спасибо за вашу помощь.

1 Ответ

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

Я понял это. 

svg.selectAll('text')
.data(data)
.enter()
.append('text')
.attr('class', 'bar-value')
.attr('x', xPos)
.attr('y', yPos)
.text(d => d3.format(',.0f')(+d.population))
.attr('transform', `translate(5,`+yScale.bandwidth()/1.5+`)`);

Спасибо, что нашли время внести свой вклад.

...