javascript - d3js diagonal paths in tree layout don't look right -


i trying copy example d3js tree layout , style little more, understand details. also, applied class-oriented approach, required client project.

i not quite sure went wrong when copying it, when got display something, paths node node rather strange.

enter image description here

so, question now: why? code should same site's above, , when looking @ curve in inspector, d attribute of path looks same in example.

<path d="m428.57142857142856,180c428.57142857142856,270 285.7142857142857,270    285.7142857142857,360" class="link"> </path> 

i create diagonal in constructor of object.

var treegenerator = function(nodes,links){   this.nodes = nodes;   this.links = links;   this.svg = d3.select("svg");   this.svg.attr("width",width);   this.svg.attr("height",height);   this.system = d3.svg.diagonal(); } 

and use in method later on.

treegenerator.prototype.generatetree = function () {   var nodes = this.nodes;   var links = this.links;   //for every step of depth, there 180 step in y direction   nodes.foreach(function (d) {d.y = d.depth*180;});   //counting variable used later   var = 0;   //nodes selected   var node = this.svg.selectall("g.node");   var nodewithdata = node.data(nodes, function (d) {     // every node id returned     // if there no id, id generated on ++i, , returned     return d.id || (d.id=++i);   });   //new group gets generated   var nodeenter = nodewithdata.enter().append("g");   nodeenter.attr("class","node");   nodeenter.attr("transform", function (d) {     console.log("translation: "+d.y +", "+d.x);     return "translate(" + d.x + "," + d.y + ")";   });   //rectangle gets inserted group   var rects = nodeenter.append("rect");   //styling of rects   this.stylerects(rects);   //text gets inserted group   var texts = nodeenter.append("text");   //styling of texts   this.styletexts(texts);   //links (not yet created)   var link = this.svg.selectall("path.link");   var linkwithdata = link.data(links, function(d) {     return d.target.id;   });   console.log(linkwithdata);   //links (creation , display)   var enteredlinks = linkwithdata.enter().insert("path","g");   enteredlinks.attr("class", "link");   enteredlinks.attr("d",this.system); } 

is there way fix problem , make these paths display in example?

i'll make official then... default value fill black. set path {fill: none;} in css.


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -