Узлы дерева d3.js с теми же родителями
Я новичок в D3. Поэтому я пытаюсь сделать график, в котором два или более детей могут иметь одного и того же родителя. Интересно, как я мог сделать ссылки снова на один и тот же узел? У меня битые ссылки ..
Любая помощь будет отличной.
Вот мой код ...
var margin = { top: 100,right: 50,bottom: 200,left: 1360 },
customNodes = new Array(),
layer_wider_label = new Array(),
label_w = 70,
branch_w = 70,
m = [100, 500, 100, 500],
realWidth = window.innerWidth,
realHeight = window.innerHeight,
h = realHeight,// -m[0] -m[2],
w = realWidth,// -m[0] -m[0],
width = 3700 - margin.right - margin.left,
height = 2050 - margin.top - margin.bottom;
root = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "/PedigreeImport/json/tree6.json",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
var i = 0,
duration = 550,
rectW = 80,
rectH = 17,
ms;
var tree = d3.layout.tree().nodeSize([120, 50]);
var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.x + rectW / 2, (height-d.y) + rectH / 2];
});
var svg = d3.select("#graphDiv").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("class","drawarea")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var ms = document.getElementById('maxStep').value;
var tmpNodes = d3.layout.tree().size([450, 300]).nodes(root);
root.x0 = function(d) { return d.x; };//0;
root.y0 = function(d) { return height - d.y; };//height / 2;
root.depth = parseInt(root.layer);
customNodes.push(root);
prepareNodes(root.children);
updateNodesXOffset()
//root.children.forEach(collapse);
update(root);
d3.select("#graphDiv").style("height", "660px");
function collapse(d)
{
if (d.children)
{
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
/*d3.select("svg")
.call(d3.behavior.zoom()
.scaleExtent([0.5,5])
.on("zoom", zoom));*/
function updateNodesXOffset(){
var x_offsets = new Array();
x_offsets[0] = 0;
customNodes.forEach(function(node) {
node.x = 0;
if (node.layer > 0) {
node.x = x_offsets[node.layer - 1] + layer_wider_label[node.layer - 1] + branch_w;
x_offsets[node.layer] = node.x;
}
});
}
function prepareNodes(nodes) {
nodes.forEach(function(node) {
//alert('try');
prepareNode(node);
if (node.children) {
prepareNodes(node.children);
}
});
}
function prepareNode(node) {
node.y = getNodeY(node.id);
//.on("click", click);
//fake element to calculate labels area width.
var fakeTxtBox = svg.append("svg:text")
.attr("id", "fakeTXT")
.attr("text-anchor", "right")
.text(node.name + " : " + node.gid)
//.on("click", click(node));
var this_label_w = fakeTxtBox.node().getComputedTextLength();
svg.select("#fakeTXT").remove();
if (layer_wider_label[node.layer] == null) {
layer_wider_label[node.layer] = this_label_w;
} else {
if (this_label_w > layer_wider_label[node.layer]) {
layer_wider_label[node.layer] = this_label_w;
}
}
// node.x = nodex;
//x will be set
node.depth = parseInt(node.layer);
customNodes.push(node);
//node.on("click", click(node));
}
function getNodeY(id) {
var ret = 0;
tmpNodes.some(function(node) {
if (node.id === id) {
//return x:d3.tree has a vertical layout by default.
//ret = node.x
ret = node.x;
return;
}
})
return ret;
}
function update(source)
{
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes,function (d) {
return d.id || (d.id = ++i)
});
// Normalize for fixed-depth.
nodes.forEach(function (d) {
d.y = d.depth * 100;
});
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function (d) {
return d.id || (d.id = ++i);
});
//if(node.depth