我的d3.js树代码在那里。基本上,合作伙伴位于节点9000的左侧。8001是一个合作伙伴,其子代为9005。第二个合作伙伴为8000,而9001是9000和8000的子代。我可以调整各个合作伙伴的水平线,但可以调整合作伙伴的y位置儿童9001。尝试让9001来的线接触8000-8001。
http://jsfiddle.net/anil3405/fcd5q8fv/70/
var margin = {
top: 10,
right: 40,
bottom:300,
left: 10
},
width = 740,
height =320;
var kx = function (d) {
return d.x - 25;
};
var ky = function (d) {
return d.y - 15;
};
//thie place the text x axis adjust this to center align the text
var tx = function (d) {
return d.x - 10;
};
//thie place the text y axis adjust this to center align the text
var ty = function (d) {
return d.y + 3;
};
//make an SVG
var svg = d3.select("#graph").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//My JSON note the
//no_parent: true this ensures that the node will not be linked to its parent
//hidden: true ensures that the nodes is not visible.
var root = {
name: "",
id: 1,
hidden: true,
children: [{
name: "8000",
id: 8000,
no_parent: true
}, {
name: "",
id: 100,
no_parent: true,
hidden: true,
children: [{
name: "9001",
id: 9001
}, ]
},{
name: "8001",
id: 8001,
no_parent: true
},{
name: "",
id: 100,
no_parent: true,
hidden: true,
children: [{
name: "9005",
id: 9005
}]
},{
name: "9000",
id: 9000,
no_parent: true
}]
}
var allNodes = flatten(root);
//This maps the siblings together mapping uses the ID using the blue line
var siblings = [ {
source: {
id: 9000,
name: "Q1"
},
target: {
id: 8001,
name: "P1"
}
}];
var siblings2 = [ {
source: {
id: 9000,
name: "L1"
},
target: {
id: 8000,
name: "J1"
}
}];
// Compute the layout.
var tree = d3.layout.tree().size([width, height]),
nodes = tree.nodes(root),
links = tree.links(nodes);
// Create the link lines.
svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", elbow);
var nodes = svg.selectAll(".node")
.data(nodes)
.enter();
//First draw sibling line with blue line
svg.selectAll(".sibling")
.data(siblings)
// .data(siblings2)
.enter().append("path")
.attr("class", "sibling")
.attr("d", sblingLine)
svg.selectAll(".sibling2")
.data(siblings2)
.enter().append("path")
.attr("class", "sibling2")
.attr("d", sblingLine2);
// Create the node rectangles.
nodes.append("rect")
.attr("class", "node")
.attr("height", 30)
.attr("width", 60)
.attr("id", function (d) {
return d.id;
})
.attr("display", function (d) {
if (d.hidden) {
return "none"
} else {
return ""
};
})
.attr("x", kx)
.attr("y", ky);
// Create the node text label.
nodes.append("text")
.text(function (d) {
return d.name;
})
.attr("x", tx)
.attr("y", ty);
/**
This defines teh line between siblings.
**/
function sblingLine(d, i) {
//start point
var start = allNodes.filter(function (v) {
if (d.source.id == v.id) {
return true;
} else {
return false;
}
});
//end point
var end = allNodes.filter(function (v) {
if (d.target.id == v.id) {
return true;
} else {
return false;
}
});
//define teh start coordinate and end co-ordinate
var linedata = [{
x: start[0].x,
y: start[0].y
}, {
x: end[0].x,
y: end[0].y
}];
var fun = d3.svg.line().x(function (d) {
return d.x;
}).y(function (d) {
return d.y+9;
}).interpolate("linear");
return fun(linedata);
}
// sblingLine2 new function
function sblingLine2(d, i) {
//start point
var start = allNodes.filter(function (v) {
if (d.source.id == v.id) {
return true;
} else {
return false;
}
});
//end point
var end = allNodes.filter(function (v) {
if (d.target.id == v.id) {
return true;
} else {
return false;
}
});
//define teh start coordinate and end co-ordinate
var linedata = [{
x: start[0].x,
y: start[0].y
}, {
x: end[0].x,
y: end[0].y
}];
var fun = d3.svg.line().x(function (d) {
return d.x;
}).y(function (d) {
return d.y-8;
}).interpolate("linear");
return fun(linedata);
}
/*To make the nodes in flat mode.
This gets all teh nodes in same level*/
function flatten(root) {
var n = [],
i = 0;
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
n.push(node);
}
recurse(root);
return n;
}
/**
This draws the lines between nodes.
**/
function elbow(d, i) {
if (d.target.no_parent) {
return "M0,0L0,0";
}
var diff = d.source.y - d.target.y;
//0.40 defines the point from where you need the line to break out change is as per your choice.
var ny = d.target.y + diff * 0.30;
linedata = [{
x: d.target.x,
y: d.target.y
}, {
x: d.target.x,
y: ny
}, {
x: d.source.x,
y: d.source.y+9
}]
var fun = d3.svg.line().x(function (d) {
return d.x;
}).y(function (d) {
return d.y;
}).interpolate("step-after");
return fun(linedata);
}