Я пытаюсь удалить пустых детей из моего дерева d3js

Я пытаюсь удалить пустых детей из моего дерева d3js, когда я фильтрую некоторые данные.

Я пытаюсь удалить пустых детей из моего дерева d3js

Вот мой код, который, я думаю, мне нужно поработать для удаления пустых детей.

// Assigns the x and y position for the nodes
        var treeData = treeObject.treemap(treeObject.root);


        // Compute the new tree layout.
        var nodes = treeData.descendants().filter(function (d) {
            if (d.data.children > 0) {
                return d.data.value;
            }
        });
        var links = nodes.slice(1);

Кто-нибудь может мне помочь? Спасибо !

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы фильтруете d.data.children > 0, но в вашем примере объекта у вас есть два типа объектов

  1. объект, содержащий name, value, children и т. д.
  2. пустой массив (который, как я предполагаю, является дочерним элементом, которого вы хотите удалить)

Не видя, как вы в первую очередь получаете массив children, я бы посоветовал вам попробовать исправить свой восходящий процесс, который приводит к тому, что в этой коллекции находится пустой массив. В противном случае, вот способ очистить данные, прежде чем вы начнете вводить их в свою диаграмму d3:

let data = {
    name: 'Company A',
    value: 0,
    children: [
        { name: 'Exchanges', value: 0, children: [{...}], type: 'node', url: '#' },
        { name: 'Operations', value: 0, children: [{...}], type: 'node', url: '#' },
        { name: 'Management', value: 0, children: [{...}], type: 'node', url: '#' },
        [],
        { name: 'Support', value: 0, children: [{...}], type: 'node', url: '#' }
    ]
}

const filterFunc = (node) => {
    // make sure we are working with the right data here to prevent errors
    if (node && node.children && Array.isArray(node.children)) {

        // filter out any children which are not objects
        // you can put more logic here for even better data hygiene, 
        //    such as checking for required fields like `name`
        node.children = node.children.filter(child => !Array.isArray(child));

    } else {
        // here you can ensure each node has a valid `children` property
        node.children = []
    }

    // recursively call `filterFunc` down the tree until all nodes are validated
    node.children.forEach(child => filterFunc(child));
}

// call `filterFunc` on the root node
filterFunc(data);

// I didn't test this part, but you probably need to `.length` your array check
var nodes = treeData.descendants()
                .filter(function (d) {
                    if (d.data.children.length > 0) {
                        return d.data.value ;
                    }
                });

При локальном тестировании мой оригинальный фильтр typeof child === 'object' не работал, потому что typeof [] === 'object'. Я обновил ответ, чтобы использовать !Array.isArray(child) вместо нашего фильтра.

RemedialBear 31.03.2021 16:43

Спасибо! Это работа по удалению детей. Теперь я пытаюсь перерисовать свое дерево d3js с непустыми дочерними элементами.

Ewen 07.04.2021 10:13

Еще раз спасибо!

Ewen 07.04.2021 10:14

Другие вопросы по теме