javascript - D3 TreeMap 中的奇数笔画

Question

我正在使用 zoomable treemap来自 D3。我修改它以突出显示 TreeMap 中的当前单元格(鼠标悬停时)，但我得到了一个丑陋的结果(请注意单元格周围的红色笔划不均匀)。为什么？我该如何解决？

以下是我的修改(我只添加了mouseover 和mouseout 函数):

  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))
             });

Answer 1

那个矩形不是最上面的一个，所以笔画部分被其他矩形覆盖。

您必须将单击的矩形设为最顶部的矩形，以使笔划位于其他所有内容之上。

参见 this article/example ，它扩展了主题并提供了一些动态淡入事件元素的 d3 代码。