-
vizulyApril 12, 2016 at 4:44 pm #6102
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
You must be logged in to reply to this topic.
© 2024 — vizuly.io