CODEWITHSUNDEEP
javascripthtmlsvgd3.js
Amelio Vazquez-Reina
Amelio Vazquez-Reina

Reputation: 96264

Odd stroke in treemap in D3

I am working with the zoomable treemap from D3. I modified it to highlight the current cell (on mouseover) in the treemap, but I am getting an ugly result (note that the red stroke is not uniform around the cell). Why? And how can I fix it?

                                      enter image description here

Here are my modifications (I only added the mouseover and mouseout functions):

  var cell = svg.selectAll("g")
      .data(nodes)
    .enter().append("svg:g")
      .attr("class", "cell")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); })
      .on('mouseover', function(d) {
                 // this variable will be used in a loop to store the current node being inspected
                 var currentNode = d;
                 // this array will hold the names of each subsequent parent node
                 var nameList = [currentNode.name];
                 // as long as the current node has a parent...
                while (typeof currentNode.parent === 'object') {
                     // go up a level in the hierarchy
                     currentNode = currentNode.parent;
                     // add the name to the beginning of the list
                     nameList.unshift(currentNode.name);
                 }
                 // now nameList should look like ['flare','animate','interpolate']
                 //  join the array with slashes (as you have in your example)
                 nameList = nameList.join(' / ');
                 // now nameList should look like 'flare/animate/interpolate'
                 //  use this to set the tooltip text
                 console.log(this);
                 d3.select(this).select("rect").attr("stroke", "red")
                 d3.select(this).select("rect").attr("stroke-width", "8")
                 console.log(d3.select(this))
                 $("#cell_selector").html("<br>" + nameList + "<br>" +  'Cell size = ' + d.area); 
             })

        .on('mouseout', function(d) {
                 d3.select(this).select("rect").attr("stroke", "pink")
                 d3.select(this).select("rect").attr("stroke-width", "0")
                 console.log(d3.select(this.rct))
             });

Upvotes: 1

Views: 282

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

That rect isn't the topmost one, so the stroke is partially covered by the other rects.

You will have to make the clicked rect the topmost one to make the stroke be on top of everything else.

See this article/example, which expands on the topic and provides some d3 code for dynamically fading in the active element.

Upvotes: 2

Related Questions