Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
4 / 4 / 0
Регистрация: 23.12.2011
Сообщений: 14
1

D3JS. Динамическое добавление узлов в дереве

24.05.2014, 19:02. Просмотров 578. Ответов 0
Метки нет (Все метки)


Это мое первое знакомство с js и с библиотекой d3js, так что не кидайте помидоры =) Мне нужно, чтобы по клику по узлу дерева, к кликнутому узлу добавлялся дочерний узел. Проблема, как я понимаю, в свойстве узла depth и координатах, но как эту проблему решить пока не знаю...

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
            background-color: #272822;
        }
 
        .node circle {
            cursor: pointer;
            fill : #83AF9B;
            stroke: black;
            stroke-width: 2px;
        }
 
        .node text {
            font: 13px sans-serif;
            color: #ffffff;
            fill: lightgrey;
        }
 
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
var treeData = [
    {
        "name": "Top Level",
        "weight": -1,
        "status" : -1,
        "parent": "null",
        "children": [
            {
                "name": "Level 2: A",
                "weight": 2,
                "status" : 1,
                "parent": "Top Level",
                "children": [
                    {
                        "name": "Son of A",
                        "weight": 3,
                        "status" : 0,
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "weight": 4,
                        "status" : 0,
                        "parent": "Level 2: A"
                    }
                ]
            },
            {
                "name": "Level 2: B",
                "weight": 2,
                "status" : 1,
                "parent": "Top Level"
            }
        ]
    }
];
 
/************** Generate the tree diagram  *****************/
var margin = {top: 20, right: 120, bottom: 20, left: 120},
        width = 960 - margin.right - margin.left,
        height = 500 - margin.top - margin.bottom;
 
var i = 0;
 
var tree = d3.layout.tree()
        .size([height, width]);
 
var diagonal = d3.svg.diagonal()
        .projection(function(d) { return [d.y, d.x]; });
 
var body = d3.select("body");
 
var svg = body.append("svg")
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
var root = treeData[0];
 
var clickedNode;
 
update(root);
 
function update(source) {
 
    // compute the new tree layout.
    var nodes = tree.nodes(source).reverse(),
            links = tree.links(nodes);
 
    // normalize for fixed-depth.
    nodes.forEach(function(d) {
        d.y = d.depth * 180;
    });
 
    // declare the nodes
    var node = svg.selectAll("g.node")
            .data(nodes, function(d) { return d.id || (d.id = ++i); });
 
    // Enter the nodes.
    var nodeEnter = node.enter().append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + d.y + "," + d.x + ")"; })
            .on("click", function(d) {
                var node = {
                    "name": "temp",
                    "weight": 2,
                    "status" : 1,
                    "parent": d
                };
 
                if(typeof d.children == "undefined") {
                    d.children = [node];
                } else {
                    d.children.push(node);
                }
 
                update(d);
 
            });
 
    nodeEnter.append("circle")
            .attr("class", "nodeCir")
            .attr("r", 30)
            .style("fill", function(d) { return d.status ? "#83AF9B" : "#AF4933"; });
 
    nodeEnter.append("text")
            .attr("text-anchor", "middle")
            .html(function(d) { return d.name + "<br/>" + d.weight; });
 
    // Declare the links
    var link = svg.selectAll("path.link")
            .data(links, function(d) { return d.target.id; });
 
    // Enter the links.
    link.enter().insert("path", "g")
            .attr("class", "link")
            .attr("d", diagonal);
 
}
Ссылка на код jsfiddle

Заранее спасибо за помощь)
1
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.05.2014, 19:02
Ответы с готовыми решениями:

Динамическое добавление узлов в TreeView
Есть TreeView, в котором надо отобразить структуру базы данных. Данные из базы должны...

Выборка всех родительских узлов в дереве
В таблице CREATE TABLE Nodes ( ID int PRIMARY KEY INDENTITY(0,1) not null, Name...

Посчитать число узлов и листьев в дереве
Помогите подсчитать число узлов и листьев в дереве. Заранее благодарен.

Посчитать количество неполных узлов в бинарном дереве
Всем привет. Помогите пожалуйста написать рекурсивную функцию обхода дерева, которая посчитает...

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.05.2014, 19:02

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Поиск и удаление одинаковых узлов в бинарном дереве
Здравствуйте! у меня есть бинарное дерево, у которого нужно найти одинаковые узлы, а затем их...

Подсчитать число узлов в заданном двоичном дереве
Помогите пожалуйсто с программой.Подсчитать число узлов в заданном двоичном дереве.

Поиск суммы последовательных узлов в бинарном дереве
Дано: бинарное дерево (Например созданное по этому алгоритму). Число S. Нужно найти...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.