-
ChristopherApril 11, 2016 at 8:24 pm #6099
Thanks for the quick response Tom,
I tried what you said and it still renders but now when you hover over the arc, the text disappears and when you re-size, the text comes back. Also, hovering over the nodes is still a bit messed up after resize.
Below is what I changed in halo.js:
var svg,g,background, plot, plotBackground, labelPlot, haloPlot, nodePlot, linkPlot, defs;
…
function initialize() {
svg = scope.selection.append(“svg”).attr(“id”, scope.id).style(“overflow”,”visible”).attr(“class”,”vizuly”);
defs = vizuly.util.getDefs(viz);
background = svg.append(“rect”).attr(“class”,”vz-background”);
g = svg.append(“g”).attr(“class”,”vz-halo-viz”);
plot = g.append(“g”).attr(“class”,”vz-halo-plot”).attr(“clip-path”,”url(#” + scope.id + “_plotClipPath)”);
plotBackground = plot.append(“rect”).attr(“class”,”vz-plot-background”);
linkPlot = plot.append(“g”).attr(“class”,”vz-halo-link-plot”);
nodePlot = plot.append(“g”).attr(“class”, “vz-halo-node-plot”);
labelPlot = plot.append(“g”).attr(“class”, “vz-halo-label-plot”);
haloPlot = plot.append(“g”).attr(“class”, “vz-halo-arc-plot”);// Tell everyone we are done initializing
scope.dispatch.initialize();
}…
function update() {
// Call measure each time before we update to make sure all our our layout properties are set correctly
measure();// Update our major place holder elements
svg.attr(“width”, scope.width).attr(“height”, scope.height);
background.attr(“width”, scope.width).attr(“height”, scope.height);
plot.style(“width”,size.width).style(“height”,size.height).attr(“transform”,”translate(” + size.left + “,” + size.top + “)”);
haloPlot.attr(“transform”, “translate(” + size.width / 2 + “,” + size.height / 2 + “)”);
labelPlot.attr(“transform”, “translate(” + size.width / 2 + “,” + size.height / 2 + “)”);
linkPlot.attr(“transform”,”translate(” + size.width/2 + “,” + size.height/2 + “)”);
nodePlot.attr(“transform”,”translate(” + (size.width-innerRadius*2)/2 + “,” + (size.height-innerRadius*2)/2 + “)”);// Create the primary halo arcs based on the halo groups and add our event dispatches
var haloGroup = haloPlot.selectAll(“.vz-halo-arc”).data(haloLayout(haloArcs));
haloGroup.enter().append(“path”);
haloGroup.attr(“class”, function (d) {
return “vz-halo-arc ” + “halo-key_” + d.data.key
})
haloGroup.attr(“id”,function (d) {
return “parentBrand_”+d.data.key});
haloGroup.on(“mouseover”, function (d, i) { scope.dispatch.arcover(this, d, i) });
haloGroup.on(“mouseout”, function (d, i) { scope.dispatch.arcout(this, d, i) });
haloGroup.exit().remove();haloGroup.attr(“d”,function (d,i) {
return haloArc(d,i);
});// Store the centroids for each arc group.
// Themes or page developers can use these stored centroids to place data tips or other information in the
// center of the group.
haloGroup.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);
});//Add Labels to the Arcs
var lableGroup = labelPlot.selectAll(“.vz-halo-label”).data(haloLayout(haloArcs))
lableGroup.enter().append(“text”);
lableGroup.attr(“class”, function (d) {
return “vz-halo-label ” + “label-key_” + d.data.key
})
lableGroup.on(“mouseover”, function (d, i) { scope.dispatch.arcover(this, d, i) });
lableGroup.on(“mouseout”, function (d, i) { scope.dispatch.arcout(this, d, i) });
lableGroup.exit().remove()
lableGroup.attr(“x”, function (d) {
switch (d.data.key) {
case “2”:
return 400;
case “4”:
return 60;
case “5”:
return 20
case “128”:
return 60
case “162”:
return “images/fx.png”;
}
}).attr(“dy”, -10);
lableGroup.append(“textPath”).attr(“stroke”, “black”)
.attr(“xlink:href”, function (d) {
return “#parentBrand_” + d.data.key
})
.text(function (d) {
if (d.data.values[0].parentBrand == “NULL”) {
return “NON-MAJOR BRAND”
}
else
return d.data.values[0].parentBrand
})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);
});…
I am also going to need to the same thing on the Nodes… Text in the center of the circles … based on value.
Thanks Again!
ChrisYou must be logged in to reply to this topic.
© 2024 — vizuly.io