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.

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
Post a Comment