d3.js - D3 Force Directed Map Source and Target Properties -


is possible use names other source , target d3 force directed map? connecting api provides me needed information supplying 'src-port' , 'dst-port'. if change names in static json file 'source' , 'target' links on map appear. if leave is, following error message:

e.source undefined

is there way can specify property names instead of using defaults, 'source' , 'target'?

here complete code work with:

function buildmap(node, ids, mode) {      d3.select("svg").remove();      width = 960,     height = 500;      svg = d3.select(node).append("svg")         .attr("width", width)         .attr("height", height)         .attr("id","chart")         .attr("preserveaspectratio","xmidymid")         .attr("viewbox","0 0 960 500");      var color = d3.scale.category20();      var force = d3.layout.force()         .charge(-220)         .linkdistance(40)         .size([width, height]);      var tip = d3.tip()         .attr('class', 'd3-tip')         .offset([-10, 0])         .html(function (d) {             return "<strong>dpid:</strong> <span style='color:red'>" + d.dpid + "</span><br />" + "<strong>type:</strong> <span style='color:red'>" + d.type + "</span>";         })                svg.call(tip);      //d3.json("http://192.168.1.82:9000/wm/onos/topology", function(error, graph) {      d3.json("http://localhost:9001/data/nodes.json", function(error, graph) {       force           .nodes(graph.switches)           .links(graph.links.foreach(function(l) {                     l.source = l["src-port"];                     l.target = l["dst-port"];                 })             )                                        .on("tick", tick)           .start();        var link = svg.selectall(".link")             .data(graph.links)             .enter().append("line")             .attr("class", "link")             .style("stroke-width", function(d) { return math.sqrt(d.value); });        var node = svg.selectall(".node")             .data(graph.switches)             .enter().append("circle")                 .attr("class", function(d) {                                      //if(d.type == undefined) {                                         return "node";                                      //} else {                                     //  return d.type;                                      //}                                     })                 .attr("r", function(d) {                                      //if(d.type == undefined) {                                         return 5;                                      //} else {                                     //  switch(d.type) {                                     //      case "core":                                     //          return 10;                                     //          break;                                     //      case "agg":                                     //          return 8;                                     //          break;                                     //      default:                                     //          return 5;                                     //      }                                      //}                                     })                 .style("fill", function(d) {                                                                             //var count = ids.length;                                     //if(count <= 0)                                     //  return d.color;                                     var color = "#15a9ff";                                     //if(d3.select(this).style("fill") == color){                                     //  (i = 0; <= count; i++) {                                     //      if(ids[i] != undefined) {                                     //              if(ids[i].attributes.id == d.instance_id) {                                     //                  color = d.color;                                     //              }                                      //          }                                      //      }                                             return color;                                                                            //  }                                     }                                 )                 .on('mouseover', tip.show)                 .on('mouseout', tip.hide)                 .call(force.drag)                 .on("click", function (d) {                                 enyo.signals.send("onnodeselected", d);                             });                      //node.append("title")     //    .text(function(d) { return d.name; });          function tick(e) {             //if(mode == "tree") {             //  var k = 6 * e.alpha;             //  graph.links.foreach(function(d, i) {             //    d.source.y -= k;             //    d.target.y += k;             //  });                 node.attr("cx", function(d) { return d.x; })                     .attr("cy", function(d) { return d.y; });                 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; });             //} else {             //  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; });              //  node.attr("cx", function(d) { return d.x; })             //      .attr("cy", function(d) { return d.y; });                        }         //}        }); }

there no way through api; have modify source. 1 easy way of dealing copy values in src-port , dst-port source , target:

links.foreach(function(l) {   l.source = l.src-port;   l.target = l.dst-port; });

Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more