Hi Christopher,

It looks like you are on the right track. Sometimes these issues can be tricky to debug as the layout can be a little complex.

What I might suggest is that instead of piggy-backing on the haloGroup (which is being used to generate path elements) that you do the following and create a completely different layer to put the labels on (I suspect the text elements are getting in the way of the mouse-over being triggered by the paths.)

1. In the initialize routine add a new g element named something like labelPlot. You can insert this g element before the haloPlot so it doesn’t interfere with the mouse events.

2. In the update routine create a new group called labelGroup and follow the same pattern as the haloGroup.enter()/exit()… But instead of adding path elements, add your text elements and textpaths You can use the same data to populate this new group for its measurements and layout.

Doing the above should keep things separate and easier to debug. If this doesn’t help and you want to send me over your code I can take a stab at trying to see what is going on.

– Tom

Hi Christoper,

This is looking good. You can remove the following lines, as they are not needed.

lableGroup.each(function (haloSection) {
var angle = (haloSection.startAngle + (haloSection.endAngle – haloSection.startAngle) / 2) – 90 * radian;
haloSection.x = innerRadius * Math.cos(angle);
haloSection.y = innerRadius * Math.sin(angle);
});

The next place to look is the halo.js theme file. That is what is probably making the changes on hover that are interfering with your text. Without actually seeing what is going on and having access to the source code it is a little hard for me to tell you exactly what the problem is.

What I use to debug issues like this is run it in chrome and open up the developer tools, select the element in question and then do the mouseover to see what happens. This will help you track down why things are occurring.

Let me know if that helps.

– Tom

Hi Christopher. For someone new to D3 and SVG you are doing some more advanced stuff!

Okay, so what is happening is that EACH time you resize you are calling the update routine and it is appending that textPath.

Enter() is called each time a new data element is paired with the selection. That is when you want to do your append statements. For just updating values you do that outside of the enter event, and just use a select statement. So once you have paired data with a corresponding DOM element you simply select it and modify it. Like this.

d3.selectAll(“.myElementClass”).attr(“some-attribute”,”some-value”);

This assumes that “myElementClass” already has been attached to the DOM.

For this code look at the way the halo component adds halo groups in the original source code:

haloGroup.enter().append("path")
            .attr("class",function(d) { return "vz-halo-arc " + "halo-key_" + d.data.key })
            .on("mouseover",function (d,i) { scope.dispatch.arcover(this,d,i) })
            .on("mouseout",function (d,i) { scope.dispatch.arcout(this,d,i) });
        haloGroup.exit().remove();
        haloGroup.attr("d",function (d,i) {
            return haloArc(d,i);
        });

In the above code you notice we use the function chain from the ENTER event to append our path and set the class and event handlers. Below that we tell D3 to remove the element if the data disappears and below that we issue its update statement. Your code is slightly different. You are not using the function chain for the enter event other than to append the FIRST text element. You are prefexing all your calls with labelGroup, which actually does something a little different. It is executed for each time it is called versus just the first time data is added.

But your bug appears to be on this line:

.attr(“dy”, -10);
lableGroup.append(“textPath”)

This line is getting called EVERY time you hit the update event of the viz. What you want to do is only call this once, when you first add the label on the enter(), so something like this.

lableGroup.enter().append(“text”);
 .attr(“class”, function (d) { return “vz-halo-label ” + “label-key_” + d.data.key})
 .on(“mouseover”, function (d, i) { scope.dispatch.arcover(this, d, i) });
 .on(“mouseout”, function (d, i) { scope.dispatch.arcout(this, d, i) })
 .append("textPath").attr("class","vz-halo-label-textPath")
 ....;

See how I am using the function chain off the enter event to create the labels and nest one inside the other?

Later if you want to just alter the text path you can do something like this.

labelGroup.selectAll(".vz-halo-label-textPath").style("stroke","#FFF");

Once you understand how D3 does the select/enter/exit it all makes more sense. Hope this helps.

– Tom