Как в моем случае переделать функции для получения значений (D3.js)?

Question

[Ninja Mate]

Сделал D3.js графики по туториалу и все получилось, но там дата из аррея обычного, а мне нужно из вот такого.

var dataArray= [
                          [ {'name': 'Education', 'number': 33}],
                          [ {'name': 'Promotion', 'number': 10}],
                          [ {'name': 'Events', 'number': 55 }]
                         ]
<.code>
Не могу разобраться что и откуда берется для 
<code>
//SVG element
        var myChart = d3.select(this.refs.chart).append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
.selectAll("rect")
            .data(dataArray)
            .enter().append("rect")
            .style("fill", function (d) { return colors([d].number) })//Как здесь задать?
            .attr("width", xScale.rangeBand()-2 )
            .attr("height", function (d) { return yScale([d].number) })//Как здесь задать?
            .attr("x", function (d, i) { return xScale(i) })//Как здесь задать?
            .attr("y", height)//Как здесь задать?
</code>
Вот так все отлично работает если данные из аррея
<code>
.selectAll("rect")
            .data(dataArray)
            .enter().append("rect")
            .style("fill", function (d) { return colors(d) })
            .attr("width", xScale.rangeBand()-2 )
            .attr("height", function (d) { return yScale(d) })
            .attr("x", function (d, i) { return xScale(i) })
            .attr("y", height)
</code>

Answer 1

[Сергей Новиков]

А зачем массив в массиве из одного элемента? У вас тут нет однозначности и придется их либо перебирать, либо выбирать первое значение (d[0].number).

Comments

[Ninja Mate]

D3.js только с арреями работает (куча функций которые используются), d[0].number скорее всего подходит, как вот этого зверя переделать? .attr("x", function (d, i) { return xScale(i) })

[Сергей Новиков]

Ninja Mate: Нормально он работает с массивом объектов, просто пишете d.number и все. Во втором случае i это ключ данных в массиве (индекс).

[Ninja Mate]

Сергей Новиков: Первое что я попробовал

.style("fill", function (d) { return colors(d[0].number) })
            .attr("width", xScale.rangeBand()-2 )
            .attr("height", function (d) { return yScale(d[0].number) })
            .attr("x", function (d, i) { return xScale(i) })//Так и оставить?
            .attr("y", height)

не то

Error: Invalid value for attribute height="NaN"
Error: Invalid value for attribute y="NaN"

[Сергей Новиков]

Ninja Mate: Вот пример: https://jsfiddle.net/jmrgk6pa/ Ну а что делают функции yScale и xScale я не знаю.

[Ninja Mate]

Сергей Новиков: Все дошло через сутки) я оказывается анимацию забыл переделать. Вот и не работало. Спасибо за помощь.