javascript - Links and textPaths in D3 cluster layout -


my question similar js d3 textpath isn't displayed

the 1 difference want attach json comes links not nodes(well, every node has link going it's parent, want link have same json)...and ideally, want add line root node out left going nowhere.

then, want have text in middle of link , following link line nice not absolutely necessary.

my current non-working code is(and not sure, need add id element each link? need json!!!! plus need json retrieve text each link well) , think use id in textpath refer path if not mistaken, right?

var width = $("#graph").width(),     height = 200;  var cluster = d3.layout.cluster()     .size([height, width - 160]);  var diagonal = d3.svg.diagonal()     .projection(function(d) { return [d.y, d.x]; }); var mydiv = document.getelementbyid('graph');  var svg = d3.select(mydiv).append("svg")     .attr("width", width)     .attr("height", height)   .append("g")     .attr("transform", "translate(40,0)");  d3.json("/datastreams/json/${_encoded}", function(error, root) {   var nodes = cluster.nodes(root),       links = cluster.links(nodes);    var link = svg.selectall(".link")       .data(links)     .enter().append("path")       .attr("class", "link")       .attr("d", diagonal);    var node = svg.selectall(".node")       .data(nodes)     .enter().append("g")       .attr("class", "node")       .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })    link.append("text")      .style("font-size", function(d) { return d.selected ? "16px" : "10px"; })      .style("font-weight", function(d) { return d.selected ? "bold" : ""; })      .text(function(d) { return "ssss="+d.name; });    node.append("circle")       .attr("r", function(d) { return d.selected ? 10 : 4.5; });    var refs = node.append("a")     .attr("xlink:href", function(d) { return d.root ? "start" : "end"; });    var text = refs.append("text")   .attr("dx", function(d) { return d.root ? 8 : -8; })   .attr("dy", -4)   .style("text-anchor", function(d) { return d.root ? "start" : "end"; });    text.append("tspan")      .style("font-size", function(d) { return d.selected ? "16px" : "10px"; })      .style("font-weight", function(d) { return d.selected ? "bold" : ""; })      .style("fill", function(d) { return "blue"; })      .text(function(d) { return d.name; });  });  d3.select(self.frameelement).style("height", height + "px");  </script> 

ah, there go seems working(well, not done have close want).

  var textpath = path.each(function(l){     var aref = theg.append("a")         .attr("xlink:href", function(d) { return "http://databus.nrel.gov" });     var text = aref.append("text")           .style("fill", function(d) { return "blue"; });     var textpath = text.append("textpath")             .attr("startoffset", "50%")             .attr("xlink:href", "#path"+l.target.name)             .text("insert");      var aref2 = theg.append("a")     .attr("xlink:href", function(d) { return "http://databus.nrel.gov" });   var text2 = aref2.append("text")     .style("fill", function(d) { return "blue"; });   var textpath2 = text2.append("textpath")     .attr("startoffset", "60%")     .attr("xlink:href", "#path"+l.target.name)     .text("delete");   }); 

Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -