var force = D3.layout.force ()//layout convert the JSON format to the available format for the Mechanics diagram
. nodes (D3.values (nodes))//Set node array
. Links (links)//Set up an array of lines
. size ([width, height])//Scope size
. Linkdistance (180)//Cable length
. Charge (-1500)//The charge number of the vertex. This parameter determines whether it is repulsive or attractive, and the smaller the number, the more repulsive.
. On ("tick", tick)//refers to the time interval, which refreshes the screen at intervals
. Start ();//Start conversion
Arrow
var marker=
Svg.append ("marker")
. attr ("id", function (d) {return D;})
. attr ("id", "Resolved")
. attr ("Markerunits", "strokewidth")//set to Strokewidth arrows will vary with the thickness of the line
. attr ("Markerunits", "Userspaceonuse")
. attr ("ViewBox", "0-5 10 10")//area of the coordinate system
. attr ("reFX", 32)//arrow coordinates
. attr ("Refy",-1)
. attr ("Markerwidth", 12)//size of the logo
. attr ("Markerheight", 12)
. attr ("Orient", "Auto")//Draw direction, can be set to: Auto (auto confirm direction) and angle value
. attr ("Stroke-width", 2)//arrow width
. Append ("path")
. attr ("D", "m0,-5l10,0l0,5")//arrow Path
. attr (' Fill ', ' #000000 ');//Arrow Color
/* Set the connection line to curve
var path = Svg.append ("G"). SelectAll ("path")
. Data (Force.links ())
. Enter (). Append ("path")
. attr ("Class", function (d) {return "link" + d.type;})
. Style ("Stroke", function (d) {
Console.log (d);
return "#A254A2";//The color of the connection line
})
. attr ("Marker-end", function (d) {return "URL (#" + D.type + ")";});
*/
Set up a cable
var edges_line = Svg.selectall (". Edgepath")
. Data (Force.links ())
. Enter ()
. Append ("path")
. attr ({
' d ': function (d) {return ' M ' +d.source.x+ ' +d.source.y+ ' L ' + d.target.x + ' +d.target.y},
' Class ': ' Edgepath ',
' Fill-opacity ': 0,
' Stroke-opacity ': 0,
' Fill ': ' Blue ',
' Stroke ': ' Red ',
' ID ': function (d,i) {return ' Edgepath ' +i;}})
. Style ("Stroke", function (d) {
var LineColor;
Set line color based on relationship differences
if (d.rela== "Upper Product" | | d.rela== "upstream" | | d.rela== "INFERIOR product") {
Linecolor= "#A254A2";
}else if (d.rela== "main product") {
Linecolor= "#B43232";
}
return linecolor;
})
. Style ("Pointer-events", "none")
. Style ("Stroke-width", 0.5)//line thickness
. attr ("Marker-end", "url (#resolved)");//arrows marked with an ID number
var edges_text = Svg.append ("G"). SelectAll (". Edgelabel")
. Data (Force.links ())
. Enter ()
. Append ("text")
. Style ("Pointer-events", "none")
. attr ("Class", "Linetext")
. attr ({' Class ': ' Edgelabel ',
' ID ': function (d,i) {return ' Edgepath ' +i;},
' DX ': 80,
' Dy ': 0
' Font-size ': 10,
' Fill ': ' #aaa '
});
Set the text on a line
Edges_text.append (' Textpath ')
. attr (' Xlink:href ', function (d,i) {return ' #edgepath ' +i})
. Style ("Pointer-events", "none")
. text (function (d) {return d.rela;});
Circle
var circle = svg.append ("G"). SelectAll ("Circle")
. Data (Force.nodes ())//indicates the use of Force.nodes
. Enter (). Append ("Circle")
. Style ("Fill", Function (node) {
var color;//circle Background Color
var link=links[node.index];
if (node.name==link.source.name && link.rela== "main product") {
Color= "#F6E8E9";
}else{
Color= "#F9EBF9";
}
return color;
})
. Style (' stroke ', function (node) {
var color;//the color of the Circle line
var link=links[node.index];
if (node.name==link.source.name && link.rela== "main product") {
Color= "#B43232";
}else{
Color= "#A254A2";
}
return color;
})
. attr ("R", 28)//Set Circle radius
. On ("click", Function (node) {
Make cable bold when clicked
Edges_line.style ("Stroke-width", function (line) {
Console.log (line);
if (Line.source.name==node.name | | line.target.name==node.name) {
return 4;
}else{
return 0.5;
}
});
D3.select (this). Style (' Stroke-width ', 2);
})
. Call (Force.drag);//upload the currently selected element to the drag function so that the vertex can be dragged
/*
Circle.append ("text")
. attr ("dy", ". 35em")
. attr ("Text-anchor", "middle")//Add text inside the circle
. text (function (d) {
Console.log (d);
return d.name;
}); */
Hint Text for Circle
Circle.append ("Svg:title")
. text (function (node) {
var link=links[node.index];
if (node.name==link.source.name && link.rela== "main product") {
Return "Double click to view Details"
}
});
/* Rectangle
var rect=svg.append ("Rect")
. attr ({"x": +, "y": 100,
"width": +, "height": 50,
"Rx": 5,//Horizontal rounded corners
"ry": 10//vertical Fillet
})
. Style ({
"Stroke": "Red",
"Stroke-width": 1,
"Fill": "Yellow"
});*/
var text = Svg.append ("G"). SelectAll ("text")
. Data (Force.nodes ())
Returns a placeholder object (placeholder) for the missing element, pointing to a portion of the bound data that is more than the selected set of elements.
. Enter ()
. Append ("text")
. attr ("dy", ". 35em")
. attr ("Text-anchor", "middle")//Add data to the circle
. Style (' Fill ', function (node) {
var color;//text color
var link=links[node.index];
if (node.name==link.source.name && link.rela== "main product") {
Color= "#B43232";
}else{
Color= "#A254A2";
}
return color;
}). attr (' x ', function (d) {
Console.log (d.name+ "---" + d.name.length);
var re_en =/[a-za-z]+/g;
If it's all in English, don't wrap.
if (D.name.match (re_en)) {
D3.select (This). Append (' Tspan ')
. attr (' x ', 0)
. attr (' Y ', 2)
. Text (function () {return d.name;});
}
If less than four characters, no line break
else if (d.name.length<=4) {
D3.select (This). Append (' Tspan ')
. attr (' x ', 0)
. attr (' Y ', 2)
. Text (function () {return d.name;});
}else{
var top=d.name.substring (0,4);
var bot=d.name.substring (4,d.name.length);
D3.select (This). Text (function () {return ';});
D3.select (This). Append (' Tspan ')
. attr (' x ', 0)
. attr (' Y ',-7)
. Text (function () {return top;});
D3.select (This). Append (' Tspan ')
. attr (' x ', 0)
. attr (' y ', 10)
. Text (function () {return bot;});
}
Display text directly
/*.text (function (d) {
return d.name; */
});
/* Display the text outside the circle
var text2 = Svg.append ("G"). SelectAll ("text")
. Data (Force.links ())
Returns a placeholder object (placeholder) for the missing element, pointing to a portion of the bound data that is more than the selected set of elements.
. Enter ()
. Append ("text")
. attr ("x", 150)//Set text coordinates
. attr ("Y", ". 50em")
. text (function (d) {
Console.log (d);
return d.name;
return D.rela;
Console.log (d);
return ' 1111 ';
});*/
function tick () {
Path.attr ("D", linkarc);//Cable
Circle.attr ("transform", transform1);//Circle
Text.attr ("transform", transform2);//Vertex text
Edges_text.attr ("transform", TRANSFORM3);
Text2.attr ("D", linkarc);//Connection line text
Console.log ("Text2 ...........");
Console.log (TEXT2);
Edges_line.attr ("x1", function (d) {return d.source.x;});
Edges_line.attr ("Y1", function (d) {return d.source.y;});
Edges_line.attr ("X2", function (d) {return d.target.x;});
Edges_line.attr ("Y2", function (d) {return d.target.y;});
Edges_line.attr ("X", function (d) {return (d.source.x + d.target.x)/2;});
Edges_line.attr ("Y", function (d) {return (d.source.y + d.target.y)/2;});
Edges_line.attr (' d ', function (d) {
var path= ' M ' +d.source.x+ ' +d.source.y+ ' L ' + d.target.x + ' +d.target.y;
return path;
});
Set the coordinates of the connector, using the elliptical ARC path segment bidirectional encoding
function Linkarc (d) {
var dx = d.target.x-d.source.x,
DY = d.target.y-d.source.y,
Dr = math.sqrt (dx * dx + dy * dy);
Return "M" + d.source.x + "," + d.source.y + "A" + Dr + "," + Dr + "0 0,1" + d.target.x + "," + d.target.y;
The DOT path format is: Msource.x,source.yarr00,1target.x,target.y
Return ' M ' +d.source.x+ ' +d.source.y+ ' L ' + d.target.x + ' +d.target.y
}
Set the coordinates of a circle and text
function Transform1 (d) {
Return "translate (" + D.x + "," + D.y + ")";
}
function Transform2 (d) {
Return "Translate (" + (d.x) + "," + D.y + ")";
}
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
