You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
/**
流程处理方法
**/
D3Tree(treeData,statusValue){
// Calculate total nodes, max label length
var totalNodes = 0;
var maxLabelLength = 0;
// panning variables
var panSpeed = 200;
var panBoundary = 20; // Within 20px from edges will pan when dragging.
// Misc. variables
var i = 0;
var duration = 750;
var root;
// size of the diagram
var viewerWidth = 800
var viewerHeight =200;
var fullScreenFlag=0;
var dragStarted=null;
var domNode=null;
var nodes;
var tree = d3.layout.tree()
.size([viewerHeight, viewerWidth]);
// define a d3 diagonal projection for use by the node paths later on.
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.y, d.x];
});
var baseSvg;
//clear
d3.select("#tree-container").html("");
//
baseSvg = d3.select("#tree-container").append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight)
.attr("class", "overlay")
//.call(zoomListener);
// A recursive helper function for performing some setup by walking through all nodes
function visit(parent, visitFn, childrenFn) {
if (!parent) return;
visitFn(parent);
var children = childrenFn(parent);
if (children) {
var count = children.length;
for (var i = 0; i < count; i++) {
visit(children[i], visitFn, childrenFn);
}
}
}
// Call visit function to establish maxLabelLength
visit(treeData, function(d) {
totalNodes++;
maxLabelLength = Math.max(d.value.length, maxLabelLength);
}, function(d) {
return d.children && d.children.length > 0 ? d.children : null;
});
// Define the zoom function for the zoomable tree
function zoom() {
svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
// define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);
// Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children.
function centerNode(source) {
var scale = zoomListener.scale();
var x = -source.y0;
var y = -source.x0;
x = x * scale + viewerWidth / 8+20;
y = y * scale + viewerHeight / 2+25;
d3.select('g').transition()
.duration(duration)
.attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
zoomListener.scale(scale);
zoomListener.translate([x, y]);
}
/*******************添加矩形圆角背景边框,样式**************************/
var toottipWidth=200;
var tooltip = d3.select("body")
.append("div")
.attr("class","tooltip2")
.style("opacity",0.0).style("left", "-500px")
.style("top", "-200px").style("z-index",'2')
.style("width",toottipWidth);
var currentNode=null;
function update(source) {
// Compute the new height, function counts total children of root node and sets tree height accordingly.
// This prevents the layout looking squashed when new nodes are made visible or looking sparse when nodes are removed
// This makes the layout more consistent.
var levelWidth = [1];
var childCount = function(level, n) {
if (n.children && n.children.length > 0) {
if (levelWidth.length <= level + 1) levelWidth.push(0);
levelWidth[level + 1] += n.children.length;
n.children.forEach(function(d) {
childCount(level + 1, d);
});
}
};
childCount(0, root);
var newHeight = d3.max(levelWidth) * 90; // 25 pixels per line
tree = tree.size([newHeight, viewerWidth]);
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Set widths between levels based on maxLabelLength.
nodes.forEach(function(d) {
// d.y = (d.depth * (maxLabelLength * 10)); //maxLabelLength * 10px
// alternatively to keep a fixed scale one can set a fixed depth per level
// Normalize for fixed-depth by commenting out below line
d.y = (d.depth * 80); //500px per level.
});
// Update the nodes…
var node = svgGroup.selectAll("g.node")
.data(nodes, function(d) {
return d.id || (d.id = ++i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
//.call(dragListener)
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})//.on("click", click);
/*******************以上为添加浮层,样式*****************************/
nodeEnter.append("circle")
.attr('class', 'nodeCircle')
.attr("r", 0)
.style("fill", function(d) {
return d.children || d._children ? "lightsteelblue" : "#fff";
})
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ? -15 : 15;
})
.attr("dy", ".35em")
.attr('class', 'nodeText')
.attr("text-anchor", function(d) {
return d.children || d._children ? "middle" : "start";
})
.text(function(d) {
return d.value;
})
.style("fill-opacity", 10);
// Update the text to reflect whether node has children or not.
node.select('text')
.attr("x", function(d) {
return d.children || d._children ? 0 : 0;
})
.attr("y", function(d) {
return 20;
})
.attr("text-anchor", function(d) {
return d.children || d._children ? "middle" : "middle";
})
.text(function(d) {
return d.value;
});
// Change the circle fill depending on whether it has children and is collapsed
node.select("circle.nodeCircle")
.attr("r", 10)
.style("fill", function(d) {
if(d.order <=statusValue ){
if(d.order==statusValue){
currentNode=this;
}
if(statusValue.toString(2).indexOf(d.order.toString(2),0)==0){
d3.select(this).style("opacity","0.9")
if(d.order==129 || d.order==33 ){
return "yellow";
}else if(d.order==65 || d.order==5 || d.order==17){
return "red";
}
return "#00CC00";
}
}
return "#D0D0D0";
//return d.children ? "lightsteelblue" : "#fff";
})
.on("mouseover",function(d){
//d3.select(this).attr("class",'link2');
if(d.msg!=null){
tooltip.html(d.msg)
.style("left", (d3.event.pageX-toottipWidth/2) + "px")
.style("top", (d3.event.pageY + 20) + "px")
.style({"opacity":"0.8","display":"block"});
//console.log(d.msg);
}
})
.on("mousemove",function(d){
// 鼠标移动时，更改样式 left 和 top 来改变提示框的位置
tooltip.style("left", (d3.event.pageX-toottipWidth/2) + "px")
.style("top", (d3.event.pageY + 20) + "px");
})
.on("mouseout",function(d){
//鼠标移出时，将透明度设定为0.0（完全透明）
tooltip.style({"opacity":"0.0","display":"none"});
// d3.select(this).attr("class",'link');
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
});
// Fade the text in
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
/**
nodeExit.select("circle")
.attr("r", 0);
nodeExit.select("text")
.style("fill-opacity", 0);**/
// Update the links…
var link = svgGroup.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", function(d){
if(d.target.order <= statusValue ){
if(statusValue.toString(2).indexOf(d.target.order.toString(2),0)==0)
return "link2";
}
return "link1";
})
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
})
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Append a group which holds all nodes and which the zoom Listener can act upon.
var svgGroup = baseSvg.append("g");
// Define the root
root = treeData;
root.x0 = viewerHeight / 2;
root.y0 = 0;
// Layout the tree initially and center on the root node.
update(root);
centerNode(root);
if(currentNode!=null){
//定时器，颜色变化
var opacity= currentNode.style.opacity;
var dire=1;
console.log(opacity);
var timer = setInterval(function () {
if(dire==1){
opacity -= .05;
}else{
opacity +=.05;
}
if (opacity < 0.1 || opacity>1) {
dire= 1-dire;
}
d3.select(currentNode).style("opacity",opacity).attr("r", 10-opacity*4);
}, 100);
}
}
data 类似如下：
code如下：
css:
The text was updated successfully, but these errors were encountered: