1

Consider this code:

   d3.selectAll("#treemap rect").on("click", function(){
      msa = d3.select(this).attr('id');
      console.log(msa);
    });

HTML:

<div id="treemap" ...>
    <rect class="node" id="cityName" ...>
    <rect class="node" id="cityName" ...>
    <rect class="node" id="cityName" ...>
    ...
</div>

Also, here is the code that creates the Tree Map structure:

var node = div.datum(newRoot[0]).selectAll(".node")
          .data(treemap.nodes)
          .enter().append("rect")
            .attr("class", "node")
            .attr("id", function(d){
              return d.cityname ? d.cityname.replace(/[\W\s]/g,"")+"-"+d.stusps: null;
            })...//The rest is inconsequential for this problem.

Now msa = d3.select(this).attr('class'); returns "node" which is expected. However the ID on that element is the name of a city, and the above JavaScript code returns null and I can see that the ID is there in the DOM. Why doesn't the .attr() method accept "id" as well as "class" and, how do I get at the ID?

Furthermore, I could just use another library with my stack like JQuery to grab the ID, but I want to do it using D3. It might be the purist in me ;)

I have looked here and still don't see it. Any ideas, thanks?

Update:

One suggestion was to append an SVG to the div and then create the tree map benieth the SVG tag like so:

   var div = d3.select("#dashboardA").append("div")
      .style("position", "relative")
      .attr("id", "treemap");

div = div.append("svg")
  .style("width", (width + margin.left + margin.right) + "px") //1220px
  .style("height", (height + margin.top + margin.bottom) + "px") //558px
  .style("margin", "auto")
  .style("left", margin.left + "px")
  .style("top", margin.top + "px");

Result:

The tree map is now not visible or accessible. Also, most of the examples I have found of tree maps all create the tree map with no SVG tag whatsoever. Here is an official example. Are they all wrong?

8
  • 1
    I know this is just a toy example but what's the actual structure? You aren't putting svg:rect into html:div, and it may be that somewhere along the way you're putting rects into g.node or something along those lines. Because d3.select(this).attr("id") should give you the node id.
    – Elijah
    Jan 8, 2015 at 19:23
  • @Elijah Actually I am not creating an svg tag, just straight up rect tags beneath the dev above. So that is the structure as it stands in the DOM. Are you saying that it missing an svg tag is part of the problem? Jan 8, 2015 at 19:45
  • Clarifying question, so the Tree map code gives the above result, and you can see that the id attr is present in the elements, right? Jan 8, 2015 at 20:21
  • @FranciscoGarcia Correct. I can see that the ID is present in the DOM. Jan 8, 2015 at 20:57
  • 2
    @Mr.Concolato, the example you link to is placing divs in divs, it doesn't need an svg tag. You are placing rects in a div. A rect is an SVG element, it needs to be in an SVG tag.
    – Mark
    Jan 12, 2015 at 15:13

1 Answer 1

2

You markup is invalid. You can't have an SVG rect in an HTML div; the rects need to be nested in an svg container.

Following that, with this code then:

d3.selectAll("#treemap rect").on("click", function(){
  msa = d3.select(this).attr('id');
  console.log(msa);
});

What are you clicking on? The invalid markup produces no rects and nothing to click on.

So ... if you place the rects in an svg your code works as expected.

3
  • Not quite. Either you missed something or you have to go deeper/provide more information. Please see my update, thanks. Jan 12, 2015 at 15:03
  • @Mr.Concolato, you'll need to create a reproducible example. My example above shows that with your mark-up and your click handler things work as expected.
    – Mark
    Jan 12, 2015 at 15:27
  • Based on your experience, you might be correct, but based on the example in my question from D3's website, I am not able to get that example to work with the SVG tag. When I remove the tag, the tree map shows up. Not sure why? I will give an upvote for your recommendation though. Jan 12, 2015 at 17:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.