D3.js: получить массив данных, привязанных к выделенной области?

Я хотел бы получить массив всех данных, связанных с выбором в D3.

Я работаю с примером из шаблона общего обновления и пробую:

var text = svg.selectAll("text")
  .data(data, function(d) { return d; });

var textEnter = text.enter().append("text")
  .attr("class", "enter")
  .text(function(d) { return d; });

console.log('textEnter data', textEnter[0]);

var textEnterKeys = d3.map(textEnter[0], function(d) { 
  return d.__data__;
});

console.log('textEnterKeys', textEnterKeys);

Но textEnterKeys выглядит точно так же, как textEnter. Как я могу получить массив данных, прикрепленных к каждому элементу в списке?

Ответ 1

Вы можете просто вызвать .data() без каких-либо аргументов в выборе для получения связанных данных. Смотрите документацию:

Если значения не указаны, то этот метод возвращает массив данных для первой группы в выборе. Длина возвращаемого массива будет соответствовать длине первой группы, а индекс каждой базы данных в возвращаемом массиве будет соответствовать соответствующему индексу при выборе. Если некоторые из элементов в выборке являются нулевыми или если у них нет связанных данных, то соответствующий элемент в массиве будет undefined.

Это не работает для выбора .enter(), поскольку пока нет элементов, к которым данные могут быть связаны. В этом случае можно использовать функцию .map:

textEnter.map(function(d) { return d.__data__; });

Ответ 2

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

function getData2(/*this is update*/) {
    if (this.enter /*quick duck type test...*/) {
        var enter = this.enter(), retVal = []

        for (var i = 0; i < this.length; i++) {

            retVal.push([])

            for (var j = 0; j < enter.length; j++) {
                retVal[i].push(enter[i][j] || enter[i].update[j])
                retVal[i][j] = retVal[i][j] && retVal[i][j].__data__
                if (!retVal[i][j]) {
                    retVal[i].pop()
                } 
            }

        }
        return (this.length > 1 ? retVal : retVal[0])
    }
}

использование...

console.log(getData2.call(update))

OR...

d3.selection.prototype.data2 = getData2
// ...
console.log(update.data2())

где update - коллекция обновлений, возвращаемая методом selection.data(array)

Ответ 3

Или вы можете использовать datum() для получения данных, если вы использовали datum(someData) для привязки.

Ответ 4

Если вы хотите получить доступ ко всему массиву данных из функции модификации, например selection.attr, вы можете использовать тот факт, что весь выбор передается функции модификации в качестве ее третьего аргумента. Таким образом, вы можете восстановить массив данных следующим образом:

mySelection.attr("stroke", (_, __, nodes) => {
  let data = d3.selectAll(nodes).data()
  // Now you can use data.
}