4版本api资料太少了,好多功能实现不了,暂时先实现到这一步吧
export default{
init:function(classpath,data){
var width = document.body.clientWidth;
var height = document.body.clientHeight-65;
var svg = d3.select(classpath)
.append("svg")
.attr("width", width)
.attr("height", height),
g = svg.append("g").attr("transform", "translate(" + (width / 2 ) + ","
+ (height / 2 ) + ")");
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var tree = d3.tree()
.size([2 * Math.PI, 300])
.separation(function(a, b) {
return (a.parent == b.parent ? 1 : 2) / a.depth;
});
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.call(d3.zoom()
.scaleExtent([1 / 4, 4])
.on("zoom", zoomed));
function zoomed() {
g.attr("transform", d3.event.transform);
}
var root = tree(stratify(data));
var link = g.selectAll(".link")
.data(root.links())
.enter().append("path")
.attr("class", "link")
.attr("d", d3.linkRadial()
.angle(function(d) { return d.x; })
.radius(function(d) { return d.y; }));
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g");
node
.on("click",nodeClick)
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + radialPoint(d.x, d.y) + ")"; });
node.append("circle")
.attr("r", 10)
.style("fill", function(d) {
if(d.id.split(".")[1] === "企业对外投资"||d.id.split(".")[1] === "分支机构"){
if(d.depth == 1 && d.id.split(".")[1] === "企业对外投资"){
return "#8789fa";
}else if(d.depth == 1 && d.id.split(".")[1] === "分支机构"){
return "#d95546";
}else if(d.depth > 1){
return "#8db739";
}
}else{
if(d.depth ==1 && d.id.split(".")[1] === "法人对外任职"){
return "#93536e";
}else if(d.depth == 1 && d.id.split(".")[1] === "股东信息"){
return "#2ba993";
}else if(d.depth == 1 && d.id.split(".")[1] === "高管信息"){
return "#4290c1";
}else if(d.depth > 1){
return "#dcb071";
}
}
return 'ef4f39'
});
node.append("text")
.attr("dy", "0.31em")
.attr("x", function(d) { return d.x < Math.PI === !d.children ? 10 : -10; })
.attr("text-anchor", function(d) { return d.x < Math.PI === !d.children ? "start" : "end"; })
.attr("transform", function(d) { return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")"; })
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
function radialPoint(x, y) {
return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
}
//点击的话,隐藏或者显示子节点
function nodeClick(d) {
console.info(d);
if (d.children) {
d._children = d.children;
d.children = null;
} else{
d.children = d._children;
d._children = null;
}
update(d);
}
}
}