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