public NetworkView2() { force = D3.Layout.Force() .Size(new int[] { width, height }) .On("tick", Tick); // var force = d3.layout.force() //.size([width, height]) //.on("tick", tick); svg = D3.Select("body").Append("svg") .Attr("width", width) .Attr("height", height); //var svg = d3.select("body").append("svg") // .attr("width", width) // .attr("height", height); link = svg.SelectAll(".link"); node = svg.SelectAll(".node"); //var link = svg.selectAll(".link"), // node = svg.selectAll(".node"); //root = new ForceNode("Test", 100); //Update(); D3.Json("../js/json_data.js", delegate(object state, object json) { root = (EntityNode)json; Update(); }); }
private void HighlightNode(D3Element d) { D3Element thisnode1 = D3.SelectFromElement(D3.Event.Target.ParentNode).SelectAll(".chromeImage"); D3Element thisnode2 = D3.SelectFromElement(D3.Event.Target.ParentNode).SelectAll(".entityImage"); thisnode1.Transition().Attr("transform", "scale(1.2)"); thisnode2.Transition().Attr("transform", "scale(2)"); }
public NetworkView(NetworkViewModel viewModel) { height = jQuery.Window.GetHeight(); width = jQuery.Window.GetWidth(); vm = viewModel; force = D3.Layout.Force() .Size(new int[] { width, height }) .LinkDistance(150) .Friction(0.7) .Charge(-700) .On("tick", Tick); zoom = D3.Behavior .Zoom() .ScaleExtent(new Number[] { minZoom, maxZoom }) .Center2(new Number[] { width / 2, height / 2 }) .On("zoom", zoomed); svg = D3.Select("#networksvg") .Attr("width", width) .Attr("height", height) .Call(zoom) .Append("g"); dragBehavior = force.OnDrag() .On("dragstart", dragstart); // Add InfoBox SVGexactTip = D3.Select("#infoBox").Style("opacity", 0); nodeData = (Stack <EntityNode>)(object) force.Nodes(); linkData = (Stack <EntityLink>)(object) force.Links(); link = svg.SelectAll(".link"); node = svg.SelectAll(".node"); Update(); ViewBase.RegisterViewModel(vm); // Create event listeners for MVVM vm.OnNewNodes += OnNodesChange; vm.OnSelectedNodesAdded += vm_OnSelectedNodesAdded; vm.OnSelectedNodesCleared += vm_OnSelectedNodesCleared; vm.OnSelectedLinksAdded += vm_OnSelectedLinksAdded; vm.OnInfoBoxClose += vm_OnInfoBoxClose; vm.OnZoom += vm_OnZoom; jQuery.Window.Resize(OnResize); jQuery.OnDocumentReady(delegate() { Window.SetTimeout(delegate() { vm.ProcessQueue(); }, 10); }); }
public void dragmove(D3Element d, int i) { d.px += D3.Event.dx; d.py += D3.Event.dy; d.X += D3.Event.dx; d.Y += D3.Event.dy; //D3.Event.sourceEvent.StopPropagation(); Tick(null, 0); // this is the key to make it work together with updating both px,py,x,y on d ! }
public void Update() { D3Element nodes = Flattern(root); D3Element links = D3.Layout.Tree().Links2(nodes); //var nodes = flatten(root), //links = d3.layout.tree().links(nodes); force.Nodes2(nodes) .Links2(links) .Start(); //// Restart the force layout. //force // .nodes(nodes) // .links(links) // .start(); link = link.Data(links, delegate(D3Element d) { return(d.Target.Id); }); //// Update the links… //link = link.data(links, function(d) { return d.target.id; }); link.Exit().Remove(); //// Exit any old links. //link.exit().remove(); link.Enter().Insert("line", ".node") .Attr("class", "link") .Attr <Func <EntityLink, int> >("x1", delegate(EntityLink d) { return(d.Source.X); }) .Attr <Func <EntityLink, int> >("y1", delegate(EntityLink d) { return(d.Source.Y); }) .Attr <Func <EntityLink, int> >("x2", delegate(EntityLink d) { return(d.Target.X); }) .Attr <Func <EntityLink, int> >("y2", delegate(EntityLink d) { return(d.Target.Y); }); //// Enter any new links. //link.enter().insert("line", ".node") // .attr("class", "link") // .attr("x1", function(d) { return d.source.x; }) // .attr("y1", function(d) { return d.source.y; }) // .attr("x2", function(d) { return d.target.x; }) // .attr("y2", function(d) { return d.target.y; }); //// Update the nodes… //node = node.data(nodes, function(d) { return d.id; }).style("fill", color); node = node.Data(nodes, delegate(D3Element d) { return(d.Id); }). Style("fill", Color); //// Exit any old nodes. node.Exit().Remove(); //// Enter any new nodes. node.Enter().Append("circle") .Attr("class", "node") .Attr <Func <EntityNode, Number> >("cx", delegate(EntityNode d) { return(d.X); }) .Attr <Func <EntityNode, Number> >("cy", delegate(EntityNode d) { return(d.Y); }) .Attr <Func <EntityNode, Number> >("r", delegate(EntityNode d) { return((d.Size != null) ? Math.Sqrt(d.Size) / 10 : 4.5); }) .Style("fill", Color) .On("click", click) .Call(force.Drag); }
private static void UnHighlightLink(string key) { D3Element link = D3.Select("#" + key); if (link != null) { link.Attr <string>("filter", null); link.Attr("class", "link"); } }
public void FastForward(D3Element layout, decimal alpha, int max) { int i = 0; while ((layout.Alpha() > alpha) && (i < max) && !vm.CancelRequested) { layout.Tick(); i++; } }
public void Tick(D3Element n, int i) { link.Attr <Func <EntityLink, Number> >("x1", delegate(EntityLink d) { return(d.Source.X); }) .Attr <Func <EntityLink, Number> >("y1", delegate(EntityLink d) { return(d.Source.Y); }) .Attr <Func <EntityLink, Number> >("x2", delegate(EntityLink d) { return(d.Target.X); }) .Attr <Func <EntityLink, Number> >("y2", delegate(EntityLink d) { return(d.Target.Y); }); node.Attr <Func <EntityNode, Number> >("cx", delegate(EntityNode d) { return(d.X); }) .Attr <Func <EntityNode, Number> >("cy", delegate(EntityNode d) { return(d.Y); }); }
private static void HighlightLink(string key) { D3Element link = D3.Select("#" + key); if (link != null) { link.Attr("filter", "url(#selected-glow)"); link.Attr("class", "link link-selected");; } }
public void Tick(D3Element n, int i) { link.Attr <Func <EntityLink, Number> >("x1", delegate(EntityLink d) { return(d.Source.X); }) .Attr <Func <EntityLink, Number> >("y1", delegate(EntityLink d) { return(d.Source.Y); }) .Attr <Func <EntityLink, Number> >("x2", delegate(EntityLink d) { return(d.Target.X); }) .Attr <Func <EntityLink, Number> >("y2", delegate(EntityLink d) { return(d.Target.Y); }); node.Attr <Func <EntityNode, Number> >("cx", delegate(EntityNode d) { return(d.X); }) .Attr <Func <EntityNode, Number> >("cy", delegate(EntityNode d) { return(d.Y); }); node.Attr <Func <EntityNode, string> >("transform", delegate(EntityNode d) { return("translate(" + d.X + "," + d.Y + ")"); }); }
// Toggle children on click. public void click(D3Element n, int i) { if (!D3.Event.DefaultPrevented) { EntityNode d = (EntityNode)(object)n; if (d.Children != null) { d._Children = d.Children; d.Children = null; } else { d.Children = d._Children; d._Children = null; } Update(); } }
private void ShowInfoBox(D3Element d, bool clicked) { EntityNode entityNode = (EntityNode)(object)d; vm.SelectedNode.SetValue(entityNode); if (clicked) { if (((Entity)entityNode.SourceData).Id == currentInfoBoxNode) { infoBoxPinned = false; } else { infoBoxPinned = true; currentInfoBoxNode = ((Entity)entityNode.SourceData).Id; } } SVGexactTip.Style("opacity", "1"); D3Element thisnode = D3.SelectFromElement(D3.Event.Target.ParentNode).SelectAll("image"); D3Element matrix = thisnode.Node().GetScreenCTM() .Translate(thisnode.Node().GetAttribute("cx"), thisnode.Node().GetAttribute("cy")); int swidth = jQuery.Window.GetWidth(); int sheight = jQuery.Window.GetHeight(); int left = (Window.PageXOffset + matrix.e) + 50; int top = (Window.PageYOffset + matrix.f) - 10; if (top + 100 > sheight) { top = sheight - 100; } // Show the infobox on the left left = 20; SVGexactTip.Transition() .Style("left", left + "px") .Style("top", top + "px"); }
public void Update() { this.svg.SelectAll("text").Remove(); this.svg.SelectAll("image").Remove(); link = link.Data((D3Element)(object)linkData,// null); delegate(D3Element d) { string id = ((EntityLink)(object)d).Id; return id; }); node = node.Data((D3Element)(object)nodeData, delegate(D3Element d) { string id = ((Entity)(((EntityNode)(object)d).SourceData)).Id; return id; }); link.Enter() .Insert("svg:line", ".node") .Attr<Func<EntityLink, string>>("id", delegate(EntityLink d) { return d.Id; }) .Attr("class", "link"); node.Enter().Append("svg:g") .Attr<Func<EntityNode, string>>("id", delegate(EntityNode d) { Entity entity = (Entity)d.SourceData; return GetID(entity.Id); }) .Attr("class", "node") .Attr("filter", "url(#blur1)") .On("click", delegate(D3Element d, int i) { HighlightNode(d); ShowInfoBox(d,true); }) .On("mouseover", delegate(D3Element d, int i) { HighlightNode(d); if (!infoBoxPinned) { ShowInfoBox(d,false); } }) .On("mouseout", delegate(D3Element d, int i) { UnHighlightNode(d); if (stickyInfoBox || infoBoxPinned) return; HideInfoBox(); }) .On("dblclick", delegate(D3Element d, int i) { d.Fixed = false; D3.Event.StopPropagation(); // Expand overflow nodes if there any EntityNode entityNode = (EntityNode)(object)d; vm.ExpandOverflow(entityNode); }) .Call(dragBehavior); node.Append("svg:image") .Attr("class", "chromeImage") .Attr<Func<EntityNode, string>>("xlink:href", delegate(EntityNode d) { Entity entity = ((Entity)d.SourceData); switch (entity.LogicalName) { case "account": case "contact": return "../images/network.png"; default: return null; } } ) .Attr<Func<EntityNode, string>>("x", delegate(EntityNode d) { return GetXY(d, 1.5); }) .Attr<Func<EntityNode, string>>("y", delegate(EntityNode d) { return GetXY(d, 1.5); }) .Attr<Func<EntityNode, string>>("width", delegate(EntityNode d) { return GetHeightWidth(d, 1.5); }) .Attr<Func<EntityNode, string>>("height", delegate(EntityNode d) { return GetHeightWidth(d, 1.5); }) .Attr<Func<EntityNode, string>>("visibility", delegate(EntityNode d) { Entity entity = ((Entity)d.SourceData); switch (entity.LogicalName) { case "account": case "contact": return null; default: return "hidden"; } }) .Attr<Func<EntityNode, string>>("filter", delegate(EntityNode d) { return GetFilter(d); }); node.Append("svg:image") .Attr("class", "entityImage") .Attr<Func<EntityNode, string>>("xlink:href", delegate(EntityNode d) { Entity entity = ((Entity)d.SourceData); switch (entity.LogicalName) { case "overflow": return "../images/overflow.png"; case "account": return "../images/account.png"; case "contact": return "../images/contact.png"; case "incident": return "/_imgs/Navbar/ActionImgs/Cases_32.png"; case "contract": return "/_imgs/Navbar/ActionImgs/Contract_32.png"; case "opportunity": return "/_imgs/Navbar/ActionImgs/Opportunity_32.png"; case "lead": return "/_imgs/Navbar/ActionImgs/Lead_32.png"; case "phonecall": return "/_imgs/Navbar/ActionImgs/PhoneCall_32.png"; case "email": return "/_imgs/Navbar/ActionImgs/Email_32.png"; case "task": return "/_imgs/Navbar/ActionImgs/Task_32.png"; case "appointment": return "/_imgs/Navbar/ActionImgs/Appointment_32.png"; default: // Custom entity image return "/_imgs/Navbar/ActionImgs/Documents_32.png"; } }) .Attr<Func<EntityNode, string>>("x", delegate(EntityNode d) { return GetXY(d, 0.5); }) .Attr<Func<EntityNode, string>>("y", delegate(EntityNode d) { return GetXY(d, 0.5); }) .Attr<Func<EntityNode, string>>("width", delegate(EntityNode d) { return GetHeightWidth(d, 0.5); }) .Attr<Func<EntityNode, string>>("height", delegate(EntityNode d) { return GetHeightWidth(d, 0.5); }) .Attr("filter", "url(#blur2)"); node.Append("svg:text") .Attr("class", "nodetext") .Attr<Func<EntityNode, int>>("dx", delegate(EntityNode d) { Entity entity = ((Entity)d.SourceData); switch (entity.LogicalName) { case "overflow": return -3; default: return -15; } }) .Attr<Func<EntityNode, int>>("dy", delegate(EntityNode d) { Entity entity = ((Entity)d.SourceData); switch (entity.LogicalName) { case "overflow": return 3; default: return -15; } }) .Text(delegate(EntityNode d) { Entity entity = (Entity)d.SourceData; if (entity.LogicalName == "overflow") { if (d.Children != null) { return d.Children.Count.ToString(); } return ""; } else { EntitySetting entitySetting = vm.Config.Entities[entity.LogicalName]; // If there is no name attribute setting, we'll use the name attribute so you can add an alias. string name = entity.GetAttributeValueString(entitySetting!=null && entitySetting.NameAttribute!=null ? entitySetting.NameAttribute : "name"); if (name != null && name.Length > 50) name = name.Substr(0, 50) + "..."; return name; } }); // Exit any old links. this.link.Exit().Remove(); this.node.Exit().Remove(); force.Start(); Dictionary<string, string> uniqueKeyCache = new Dictionary<string, string>(); foreach (EntityLink l in vm.Links) { string id = l.Id; if (uniqueKeyCache.ContainsKey(id)) Debug.WriteLine("Duplicate key " + id); else uniqueKeyCache[id] = id; } foreach (EntityNode l in vm.Nodes) { string id = ((Entity)(((EntityNode)(object)l).SourceData)).Id; if (uniqueKeyCache.ContainsKey(id)) Debug.WriteLine("Duplicate key " + id); else uniqueKeyCache[id] = id; } }
// Color leaf nodes orange, and packages white or blue. //function color(d) { // return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c"; //} public string Color(D3Element e) { EntityNode d = (EntityNode)(object)e; return((d._Children != null) ? "#3182bd" : d.Children != null ? "#c6dbef" : "#fd8d3c"); }
public void dragstart(D3Element d, int i) { d.Fixed = true; D3.Event.sourceEvent.StopPropagation(); }
private void UnHighlightNode(D3Element d) { D3Element thisnode = D3.SelectFromElement(D3.Event.Target.ParentNode).SelectAll("image"); thisnode.Transition().Attr("transform", "scale(1)"); }
public void Update() { this.svg.SelectAll("text").Remove(); this.svg.SelectAll("image").Remove(); link = link.Data((D3Element)(object)linkData,// null); delegate(D3Element d) { string id = ((EntityLink)(object)d).Id; return(id); }); node = node.Data((D3Element)(object)nodeData, delegate(D3Element d) { string id = ((Entity)(((EntityNode)(object)d).SourceData)).Id; return(id); }); link.Enter() .Insert("svg:line", ".node") .Attr <Func <EntityLink, string> >("id", delegate(EntityLink d) { return(d.Id); }) .Attr("class", "link"); node.Enter().Append("svg:g") .Attr <Func <EntityNode, string> >("id", delegate(EntityNode d) { Entity entity = (Entity)d.SourceData; return(GetID(entity.Id)); }) .Attr("class", "node") .Attr("filter", "url(#blur1)") .On("click", delegate(D3Element d, int i) { HighlightNode(d); ShowInfoBox(d, true); }) .On("mouseover", delegate(D3Element d, int i) { HighlightNode(d); if (!infoBoxPinned) { ShowInfoBox(d, false); } }) .On("mouseout", delegate(D3Element d, int i) { UnHighlightNode(d); if (stickyInfoBox || infoBoxPinned) { return; } HideInfoBox(); }) .On("dblclick", delegate(D3Element d, int i) { d.Fixed = false; D3.Event.StopPropagation(); // Expand overflow nodes if there any EntityNode entityNode = (EntityNode)(object)d; vm.ExpandOverflow(entityNode); }) .Call(dragBehavior); node.Append("svg:image") .Attr("class", "chromeImage") .Attr <Func <EntityNode, string> >("xlink:href", delegate(EntityNode d) { Entity entity = ((Entity)d.SourceData); switch (entity.LogicalName) { case "account": case "contact": return("../images/network.png"); default: return(null); } } ) .Attr <Func <EntityNode, string> >("x", delegate(EntityNode d) { return(GetXY(d, 1.5)); }) .Attr <Func <EntityNode, string> >("y", delegate(EntityNode d) { return(GetXY(d, 1.5)); }) .Attr <Func <EntityNode, string> >("width", delegate(EntityNode d) { return(GetHeightWidth(d, 1.5)); }) .Attr <Func <EntityNode, string> >("height", delegate(EntityNode d) { return(GetHeightWidth(d, 1.5)); }) .Attr <Func <EntityNode, string> >("visibility", delegate(EntityNode d) { Entity entity = ((Entity)d.SourceData); switch (entity.LogicalName) { case "account": case "contact": return(null); default: return("hidden"); } }) .Attr <Func <EntityNode, string> >("filter", delegate(EntityNode d) { return(GetFilter(d)); }); node.Append("svg:image") .Attr("class", "entityImage") .Attr <Func <EntityNode, string> >("xlink:href", delegate(EntityNode d) { Entity entity = ((Entity)d.SourceData); switch (entity.LogicalName) { case "overflow": return("../images/overflow.png"); case "account": return("../images/account.png"); case "contact": return("../images/contact.png"); case "incident": return("/_imgs/Navbar/ActionImgs/Cases_32.png"); case "contract": return("/_imgs/Navbar/ActionImgs/Contract_32.png"); case "opportunity": return("/_imgs/Navbar/ActionImgs/Opportunity_32.png"); case "lead": return("/_imgs/Navbar/ActionImgs/Lead_32.png"); case "phonecall": return("/_imgs/Navbar/ActionImgs/PhoneCall_32.png"); case "email": return("/_imgs/Navbar/ActionImgs/Email_32.png"); case "task": return("/_imgs/Navbar/ActionImgs/Task_32.png"); case "appointment": return("/_imgs/Navbar/ActionImgs/Appointment_32.png"); default: // Custom entity image return("/_imgs/Navbar/ActionImgs/Documents_32.png"); } }) .Attr <Func <EntityNode, string> >("x", delegate(EntityNode d) { return(GetXY(d, 0.5)); }) .Attr <Func <EntityNode, string> >("y", delegate(EntityNode d) { return(GetXY(d, 0.5)); }) .Attr <Func <EntityNode, string> >("width", delegate(EntityNode d) { return(GetHeightWidth(d, 0.5)); }) .Attr <Func <EntityNode, string> >("height", delegate(EntityNode d) { return(GetHeightWidth(d, 0.5)); }) .Attr("filter", "url(#blur2)"); node.Append("svg:text") .Attr("class", "nodetext") .Attr <Func <EntityNode, int> >("dx", delegate(EntityNode d) { Entity entity = ((Entity)d.SourceData); switch (entity.LogicalName) { case "overflow": return(-3); default: return(-15); } }) .Attr <Func <EntityNode, int> >("dy", delegate(EntityNode d) { Entity entity = ((Entity)d.SourceData); switch (entity.LogicalName) { case "overflow": return(3); default: return(-15); } }) .Text(delegate(EntityNode d) { Entity entity = (Entity)d.SourceData; if (entity.LogicalName == "overflow") { if (d.Children != null) { return(d.Children.Count.ToString()); } return(""); } else { EntitySetting entitySetting = vm.Config.Entities[entity.LogicalName]; // If there is no name attribute setting, we'll use the name attribute so you can add an alias. string name = entity.GetAttributeValueString(entitySetting != null && entitySetting.NameAttribute != null ? entitySetting.NameAttribute : "name"); if (name != null && name.Length > 50) { name = name.Substr(0, 50) + "..."; } return(name); } }); // Exit any old links. this.link.Exit().Remove(); this.node.Exit().Remove(); force.Start(); Dictionary <string, string> uniqueKeyCache = new Dictionary <string, string>(); foreach (EntityLink l in vm.Links) { string id = l.Id; if (uniqueKeyCache.ContainsKey(id)) { Debug.WriteLine("Duplicate key " + id); } else { uniqueKeyCache[id] = id; } } foreach (EntityNode l in vm.Nodes) { string id = ((Entity)(((EntityNode)(object)l).SourceData)).Id; if (uniqueKeyCache.ContainsKey(id)) { Debug.WriteLine("Duplicate key " + id); } else { uniqueKeyCache[id] = id; } } }
public void zoomed(D3Element d, int i) { svg.Attr("transform", "translate(" + D3.Event.translate + ")scale(" + D3.Event.scale + ")"); }
public NetworkView(NetworkViewModel viewModel) { height = jQuery.Window.GetHeight(); width = jQuery.Window.GetWidth(); vm = viewModel; force = D3.Layout.Force() .Size(new int[] { width, height }) .LinkDistance(150) .Friction(0.7) .Charge(-700) .On("tick", Tick); zoom = D3.Behavior .Zoom() .ScaleExtent(new Number[] { minZoom, maxZoom }) .Center2(new Number[] { width / 2, height / 2 }) .On("zoom", zoomed); svg = D3.Select("#networksvg") .Attr("width", width) .Attr("height", height) .Call(zoom) .Append("g"); dragBehavior = force.OnDrag() .On("dragstart", dragstart); // Add InfoBox SVGexactTip = D3.Select("#infoBox").Style("opacity", 0); nodeData = (Stack<EntityNode>)(object)force.Nodes(); linkData = (Stack<EntityLink>)(object)force.Links(); link = svg.SelectAll(".link"); node = svg.SelectAll(".node"); Update(); ViewBase.RegisterViewModel(vm); // Create event listeners for MVVM vm.OnNewNodes += OnNodesChange; vm.OnSelectedNodesAdded += vm_OnSelectedNodesAdded; vm.OnSelectedNodesCleared += vm_OnSelectedNodesCleared; vm.OnSelectedLinksAdded+=vm_OnSelectedLinksAdded; vm.OnInfoBoxClose += vm_OnInfoBoxClose; vm.OnZoom += vm_OnZoom; jQuery.Window.Resize(OnResize); jQuery.OnDocumentReady(delegate() { Window.SetTimeout(delegate() { vm.ProcessQueue(); }, 10); }); }
public void Tick(D3Element n, int i) { link.Attr<Func<EntityLink, Number>>("x1", delegate(EntityLink d) { return d.Source.X; }) .Attr<Func<EntityLink, Number>>("y1", delegate(EntityLink d) { return d.Source.Y; }) .Attr<Func<EntityLink, Number>>("x2", delegate(EntityLink d) { return d.Target.X; }) .Attr<Func<EntityLink, Number>>("y2", delegate(EntityLink d) { return d.Target.Y; }); node.Attr<Func<EntityNode, Number>>("cx", delegate(EntityNode d) { return d.X; }) .Attr<Func<EntityNode, Number>>("cy", delegate(EntityNode d) { return d.Y; }); node.Attr<Func<EntityNode, string>>("transform", delegate(EntityNode d) { return "translate(" + d.X + "," + d.Y + ")"; }); }
public void dragend(D3Element d, int i) { d.Fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff Tick(null, 0); force.Resume(); }