Блог

Главная - Вопросы по программированию - Заполнить таблицу с помощью D3

Заполнить таблицу с помощью D3

#d3.js

#d3.js

Вопрос:

Я пытаюсь заполнить таблицу данными, используя D3, но пытаюсь понять, как заставить это работать. Я использую D3 версии 5. Спасибо.

  <table>
    <tr>
        <th></th><th></th><th></th>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
</table>

Для начала я хочу заполнить th ключом объекта и ввести значение td keys.

// Код D3

 categories_all = [{"CAT 1":11}, {"CAT 2":12}, {"CAT 3":13}];

const table = d3.select('table');
table.selectAll('th').data(categories_all).enter().text(function(d){
    return d;
});

Я могу выполнить итерацию, используя следующий шаблон с простым javascript, но как это перевести на D3?

 for (let i = 0; i < categories_all.length; i  ) {
    for (let key in categories_all[i]) {
        console.log(key);
    }
}

Комментарии:

1. При вызове enter вам предоставляется выбор заполнителя — элементы dom не существуют. Чтобы создать, вы должны вызвать append для нее

2. Элементы dom существуют и уже находятся там. Как мне выполнить итерацию добавления ключа для каждого объекта в массиве к каждому из th тегов?

3. Ну, если вы хотите обновить, тогда не вызывайте enter

4. Что касается поиска единственного ключа — это довольно плохая структура данных, к которой вы стремитесь. Я бы предпочел сделать это с двумя массивами — один массив строк для заголовков; другой массив (строки) массивов строк (столбцов) для данных

5. Кроме того, создание элементов dom самостоятельно контрпродуктивно; цель d3 — исключить ручное создание / манипулирование dom

Ответ №1:

Как упоминал Coderino Javarino, если вы вообще используете D3, я бы рекомендовал использовать его и для создания таблицы.

Однако, предполагая, что элементы таблицы DOM уже существуют, тогда таблица должна быть заполнена следующим:

 categories_all = [{"CAT 1":11}, {"CAT 2":12}, {"CAT 3":13}];

const table = d3.select('table');
table.selectAll('th').data(categories_all).text(function(d){
    return Object.keys(d)[0];
});  

table.selectAll('td').data(categories_all).text(function(d){
    return Object.values(d)[0];
});

enter() требуется только в том случае, если вы создаете новые элементы.

Несмотря на то, что вышесказанное поможет, вам, вероятно, лучше реструктурировать данные на что-то вроде:

 categories_all = [{key: "CAT 1", value: 11}, {key: "CAT 2", value: 12}, {key: "CAT 3", value: 13}];

Таким образом, вы можете получить доступ к ключам и значениям как d.key и d.value соответственно.