d3.js combinando Agrupamento de Borda Hierárquica e Reelésio Radial – Árvore de Tilford + dados

9

Gostaria de combinar o Pacote de Bordas Hierárquicas e o Árvore Reingold – TilfordRadial

Ficaria um pouco parecido com isso (perdoe minhas habilidades horríveis no paint.net) *:

*ascriançasdevemestaremumarco,comonaÁrvore.

EuconfigureiesteviolinoquemostradadossimplesemHEB: link

Já combinei os dois tipos de dados (em comentários no início, que substituirão a variável atual "classes"):

var classes = [
{"name":"test.cluster1.item1","children": [
      {"name": "test.cluster1.item4","imports":["test.cluster1.item2","test.cluster1.item3"]},
      {"name": "test.cluster1.item5"}
     ]},
{"name":"test.cluster1.item2","imports":["test.cluster1.item3"]},
{"name":"test.cluster1.item3"}
];

Se houver uma maneira melhor de combinar os dados, sinta-se à vontade para alterá-los adequadamente.

Além de alterar os dados, não sei como proceder, pois sou um novato d3.js e javascript, especialmente quando ele virá vinculando o subitem direito (item 4), mas não o outro (item 5). No entanto, vou considerar uma resposta que mostrará um link para todos os filhos do item 1 como forma de começar a desenvolver isso.

Por favor, atualize este violino ou faça um novo para voltar seu código, se possível. Qualquer conselho sobre como proceder é bem-vindo, é claro.

O próximo passo será mostrar ou ocultar as crianças em um clique, usando um método semelhante à árvore recolhível (fique à vontade para dar conselhos sobre isso também, mas provavelmente será uma nova pergunta mais tarde se eu não conseguir descobrir como fazê-lo), já que vou ter que trabalhar com grandes quantidades de dados, justificando as crianças em primeiro lugar. .

Finalmente, toda criança pode ter seus próprios filhos, mas uma linha de filhos será suficiente por enquanto. Eu vou chegar a isso mais tarde, suponho.

ATUALIZAÇÃO: As respostas não precisam ser soluções completas, todo o resto (veja o que eu fiz lá?) ajuda!

    
por MorganFR 25.08.2016 в 18:35
fonte

1 resposta

2

Eu posso estar completamente fora do caminho para o que você está perguntando, por favor, esclareça se este é o caso.

TL; DR : Aqui é como se parece, com base no que eu interpretei da pergunta. Adicionou mais alguns dados para testes.

Hierarchical Edge Bundling, fornece uma maneira de visualizar bordas não hierárquicas no gráfico. Aqui está o link para o artigo que é implementado em d3, se você não encontrou.

No exemplo , apenas os nós folha são mostrados filtrando os outros nós:

node = node
      .data(nodes.filter(function(n) { return !n.children; }))
    .enter().append("text")
      .attr("class", "node")...

As relações hierárquicas no exemplo são representadas por pontos em nomes, portanto, cluster1 é o pai de item1, item2 e item3. Aqui é como se remover o filtro ao adicionar nós.

Agora, minha interpretação da sua pergunta é que você deseja usar o Hierarchical Edge Bundling para visualizar as relações não hierárquicas (representadas por importações no exemplo) e 'Radial Reingold – Tilford' para relações hierárquicas.

Veja como isso pode ser feito:

O formato de dados precisa não mudar para o que você propôs. Abaixo, tudo bem:

    var classes = [
        {
            "name": "test.cluster1.item1.item4",
            "imports": ["test.cluster1.item2", "test.cluster1.item3"]
        },
        {
            "name": "test.cluster1.item1.item5",
            "imports": []
        }
]

Adote a função packageImports para obter bordas hierárquicas dos nós:

nodes.forEach(function (d) {
            if(d.children && d.name !== "") d.children.forEach(function (i) {
                imports.push({
                    source: map[d.name],
                    target: i
                });
            });
        });

Adicione o gerador diagonal radial de exemplo do Radial Reingold – Tilford :

  var diagonal = d3.svg.diagonal.radial()
                .projection(
                        function(d) {
                            debugger;
                            return [d.y, d.x / 180 * Math.PI];
                        }
                );

Anexar caminho de arestas hierárquicas:

treeLink = treeLink
            .data(getHeirarchialEdges(nodes))
            .enter().append("path")
            .attr("class", "tree-link")
            .attr("d", diagonal);

Também adicionei as funções mouseover e mouseout para destacar os nós hierárquicos, tente passar o mouse sobre qualquer nó pai.

    
por Chirag Kothari 01.09.2016 / 16:39
fonte