Revision f1a1f6de
Added by Cherian Mathew almost 9 years ago
| src/main/resources/eu/etaxonomy/cdm/vaadin/jscomponent/lib/d3.conceptrelationshiptree_connector.js | ||
|---|---|---|
| 7 | 7 |
window.eu_etaxonomy_cdm_vaadin_jscomponent_D3ConceptRelationshipTree = function() {
|
| 8 | 8 |
var connector = this; |
| 9 | 9 |
var diagramElement = connector.getElement(); |
| 10 |
var margin = {top: 20, right: 120, bottom: 20, left: 120},
|
|
| 10 |
var margin = {top: 20, right: 40, bottom: 20, left: 40},
|
|
| 11 | 11 |
width = 740 - margin.right - margin.left, |
| 12 | 12 |
height = 600 - margin.top - margin.bottom; |
| 13 | 13 |
|
| ... | ... | |
| 52 | 52 |
}; |
| 53 | 53 |
// default setting is left-right |
| 54 | 54 |
var orientation = orientations.rightleft; |
| 55 |
var tAnchorWithChildren = "end"; |
|
| 56 |
var tAnchorWithoutChildren = "start"; |
|
| 55 |
var tAnchorToTaxon = "start"; |
|
| 56 |
var tAnchorConceptR = "end"; |
|
| 57 |
var tAnchorFromTaxon = "start"; |
|
| 57 | 58 |
var dirMult = 1; |
| 58 | 59 |
this.onStateChange = function() {
|
| 59 | 60 |
crTree = this.getState().conceptRelationshipTree; |
| ... | ... | |
| 63 | 64 |
|
| 64 | 65 |
if(root.direction === "left-right") {
|
| 65 | 66 |
orientation = orientations.leftright; |
| 66 |
tAnchorWithChildren = "end"; |
|
| 67 |
tAnchorWithoutChildren = "start"; |
|
| 67 |
tAnchorToTaxon = "start"; |
|
| 68 |
tAnchorConceptR = "end"; |
|
| 69 |
tAnchorFromTaxon = "start"; |
|
| 68 | 70 |
dirMult = 1; |
| 69 | 71 |
} |
| 70 | 72 |
if(root.direction === "right-left") {
|
| 71 | 73 |
orientation = orientations.rightleft; |
| 72 |
tAnchorWithChildren = "start"; |
|
| 73 |
tAnchorWithoutChildren = "end"; |
|
| 74 |
tAnchorToTaxon = "end"; |
|
| 75 |
tAnchorConceptR = "start"; |
|
| 76 |
tAnchorFromTaxon = "end"; |
|
| 74 | 77 |
dirMult = -1; |
| 75 | 78 |
} |
| 76 | 79 |
|
| ... | ... | |
| 103 | 106 |
.on("click", click);
|
| 104 | 107 |
|
| 105 | 108 |
nodeEnter.append("circle")
|
| 106 |
.attr("r", function(d) { return d.type === "taxon" ? 5 : d.type === "conceptr" ? 10 : 0; })
|
|
| 107 |
.style("fill", function(d) { return d === source && d.type === "conceptr" ? "#DF7401" : "#fff"; });
|
|
| 109 |
.attr("r", function(d) { return d.type === "ftaxon" || d.type === "ttaxon" ? 5 : d.type === "conceptr" ? 10 : 0; })
|
|
| 110 |
.style("fill", function(d) { return d === selectedNode && d.type === "conceptr" ? "#DF7401" : "#fff"; });
|
|
| 108 | 111 |
|
| 109 | 112 |
nodeEnter.append("text")
|
| 110 | 113 |
.attr("x", function(d) {
|
| 111 | 114 |
if(d.type === "conceptr") {
|
| 112 | 115 |
return dirMult*50; |
| 113 | 116 |
} else {
|
| 114 |
return d.children || d._children ? -1*dirMult*10 : dirMult*10;
|
|
| 117 |
return d.type === "ttaxon" ? 1*dirMult*10 : -dirMult*40;
|
|
| 115 | 118 |
} |
| 116 | 119 |
}) |
| 117 |
.attr("y", function(d) { return d.type === "conceptr" ? -20 : 0; })
|
|
| 120 |
.attr("y", function(d) { return d.type === "conceptr" ? -20 : d.type === "ftaxon" ? 20: 0; })
|
|
| 118 | 121 |
.attr("dy", ".35em")
|
| 119 |
.attr("text-anchor", function(d) { return d.children || d._children ? tAnchorWithChildren : tAnchorWithoutChildren; })
|
|
| 122 |
.attr("text-anchor",function(d) {
|
|
| 123 |
if(d.type === "ftaxon") {
|
|
| 124 |
return tAnchorFromTaxon; |
|
| 125 |
}; |
|
| 126 |
if(d.type === "conceptr") {
|
|
| 127 |
return tAnchorConceptR; |
|
| 128 |
}; |
|
| 129 |
if(d.type === "ttaxon") {
|
|
| 130 |
return tAnchorToTaxon; |
|
| 131 |
}; |
|
| 132 |
}) |
|
| 133 |
|
|
| 120 | 134 |
.text(function(d) { return d.name; })
|
| 135 |
.style("font-style", function(d){return d.type === "conceptr" ? "normal" : "italic"})
|
|
| 136 |
.style("font-weight", function(d){return d.type === "conceptr" ? "bold" : "normal"})
|
|
| 137 |
.style("fill", function(d){return d.type === "conceptr" ? "#000000" : "#005C5C"})
|
|
| 121 | 138 |
.style("fill-opacity", 1e-6);
|
| 122 | 139 |
|
| 140 |
|
|
| 123 | 141 |
// Transition nodes to their new position. |
| 124 | 142 |
var nodeUpdate = node.transition() |
| 125 | 143 |
.duration(duration) |
| 126 |
.attr("transform", function(d) { return "translate(" + orientation.x(d) + "," + orientation.y(d) + ")"; });
|
|
| 144 |
.attr("transform", function(d) {
|
|
| 145 |
if(d.type === "conceptr") {
|
|
| 146 |
return "translate(" + (orientation.x(d) + 20) + "," + orientation.y(d) + ")";
|
|
| 147 |
} else {
|
|
| 148 |
return "translate(" + orientation.x(d) + "," + orientation.y(d) + ")";
|
|
| 149 |
} |
|
| 150 |
}); |
|
| 127 | 151 |
|
| 128 | 152 |
nodeUpdate.select("circle")
|
| 129 |
.attr("r", function(d) { return d.type === "taxon" ? 5 : d.type === "conceptr" ? 10 : 0; })
|
|
| 153 |
.attr("r", function(d) { return d.type === "ftaxon" || d.type === "ttaxon" ? 5 : d.type === "conceptr" ? 10 : 0; })
|
|
| 130 | 154 |
.style("fill", function(d) { return d === selectedNode && d.type === "conceptr" ? "#DF7401" : "#fff"; });
|
| 131 | 155 |
|
| 132 | 156 |
nodeUpdate.select("text")
|
Also available in: Unified diff
ConceptRelationshipComposite, ConceptRelationshipView : using source from event to set primary composite
LeafNodeTaxonContainer : checking for nulls
SelectionEvent : added source object as member
StatusComposite : adding component as source instead of in the list of objects
D3ConceptRelationshipTree, ConceptRelationshipPresenterTest (.xml) : added method to compute abbreviated name
d3.conceptrelationshiptree_connector.js : updated text with from taxon position below and differentiation with italics and color