help on update child node in an update selection

28 views

Skip to first unread message

Kani Lakshmikanthan

unread,

May 25, 2013, 3:01:06 AM5/25/13

to d3...@googlegroups.com

Hi

I am trying to create a table of content. This will have a main category and topics below each category. When "mouse over" on a category, the corresponding topics will be shown underneath. Topic texts are made as hyper links by embedding them in "a" element. This code is based on http://bl.ocks.org/mbostock/3808218

Full code is given below. It works as expected, but I do not understand the need for giving the below line, under Update section.

.text("")

I just tried this arbitrarily, and it worked. If I remove this line, the code does not work. What is that I am doing wrong here. Kindly help,

~~~~~~~~~~~~~~~~~~ `Code Start` ~~~~~~~~~~~~~~~~~~~

<!DOCTYPE html>
<meta charset="utf-8">
<style>

text {
font: bold 12px monospace;
}

</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg"></svg>
<script src="d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

function update(category) {

d3.json("sqoo.json", function(sqoo) {

   // Filter content based on category selected by mouseover
   sqoo = sqoo.filter(function(d){return d.category == category })

   // Variables used for text positions.
   var tw = []
   var txtxpos = []
   var txtypos = []

   // DATA JOIN
   // Join new data with old elements, if any.
   var link = d3.select("#qont2").selectAll("#linktag")
                .data(sqoo)

   // UPDATE
   // Update old elements as needed.
   link.attr("xlink:href", function(d){return "http://www.scoop.it/t/big-data-security-analytics/?tag="+d.item;})
       .text("")

// ENTER
// Create new elements as needed. Creating "a" element for hyperlink
link.enter()
      .append("a")
      .attr("xlink:href", function(d){return "http://www.scoop.it/t/big-data-security-analytics/?tag="+d.item;})
      .attr("target","_new")
      .attr("id","linktag")

// Creating "text" inside the "a" element
var text = d3.selectAll("a").append("text")
                .attr("id","texttag")
                .style("fill", "mediumorchid")

// ENTER + UPDATE
// Appending to the enter selection expands the update selection to include
// entering elements; so, operations on the update selection after appending to
// the enter selection will apply to both entering and updating nodes.
text.text(function(d) {return d.item;})
      .style("font-size", "90%")

// Arranging the texts with proper spacing in the canvas
      .each(function(d,i) {tw [i] = this.getBBox().width;
      txtxpos[0]=150
      txtypos[0]=50
        if(txtxpos[i]+tw[i]>700) {
          txtxpos[i+1]= 150, txtypos[i+1] = txtypos[i] + 30
          }
       else {txtxpos[i+1] = txtxpos[i] + tw[i]+20, txtypos[i+1] = txtypos[i] }
        return txtxpos[i];
       })
      .attr("x",function(d,i) {return txtxpos[i]+7;})
      .attr("y",function(d,i) {return txtypos[i];})

// EXIT
// Remove old elements as needed.
   link.exit().remove()

   })
}

// Create category list
   function init()
    {
    var cw = []
    var category = ["Topic", "Products and Technology", "Vendor", "Guide", "Analytics","Reports","Insights","Research","Case Study","Career"];
    var cpos = []

    var svg = d3.select("#svg")
                .attr("width", 1200)
                .attr("height", 500)

   svg.append("svg:g")
       .attr("id","qont1")

   svg.append("svg:g")
    .attr("id","qont2")
    .attr("transform", "translate(100," + (height / 5) + ")");

   var grp1 = d3.select("#qont1").selectAll("text")
             .data(category)
             .enter()
             .append("svg:text")
             .style("fill", "MediumSeaGreen")
             .style("font-size", "90%")
             .text(function(d) {return d;})
             .each(function(d,i) {cw [i] = this.getBBox().width; })
             .on("mouseover", function(d) {update(d);})
             .attr("x",function(d,i) {cpos[0] = 250; cpos[i+1] = cpos[i] + cw[i]+10; return cpos[i];})
             .attr("y",100)
   }

// Display the category
init();

</script>

</body>
</html>

Reply all

Reply to author

Forward

0 new messages