Hover title issue in Sunburst Chart

Community Help
1

I find one issue in zoomable-sunburst example: Zoomable Sunburst / D3 / Observable.
If I move the mouse to the top left corner of the canvas(out of the circle), the text of the child layer will be displayed, which is the hover title of next layer. But at this moment the child layer circle is invisible. How can we remove this hover title?

sunburst
sunburst1996×1015 245 KB

2

I even can click the area out of the circle and go to the ‘layout’ layer directly, I am asking help about how to fix this issue. Thanks

3

You will have to add code that controls the state of the pointer-events depending on the arcVisible.

  const path = g.append("g")
    .selectAll("path")
    .data(root.descendants().slice(1))
    .join("path")
      .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
      .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)
      .attr('pointer-events', d => arcVisible(d.current) ? 'auto':'none' )  /// <<<<
      .attr("d", d => arc(d.current));

And you will need to change the click function to change the pointer-events there too.

    // Transition the data on all arcs, even the ones that aren’t visible,
    // so that if this transition is interrupted, entering arcs will start
    // the next transition from the desired position.
    path.transition(t)
        .tween("data", d => {
          const i = d3.interpolate(d.current, d.target);
          return t => d.current = i(t);
        })
      .filter(function(d) {
        return +this.getAttribute("fill-opacity") || arcVisible(d.target);
      })
        .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0)
        .attr('pointer-events', d => arcVisible(d.target) ? 'auto':'none' )  // <<<<<<

        .attrTween("d", d => () => arc(d.current));
2 Likes
4

It works now, thanks so much. :grinning:

1 Like