1
J'ai une partition sunburst bilevel avec du texte à l'intérieur des arcs mais quand je change de niveau, le texte d'un autre niveau est visible et parfois le texte du niveau supérieur n'est pas supprimé. Est-ce que quelqu'un peut m'aider?Mettre à jour le texte dans la partition sunburst bilevel
Voici mon code pour créer le chemin et le texte à l'intérieur et les fonctions lorsque je zoom dans le niveau supérieur ou lorsque je zoome au niveau dwon.
var path = group.append("path")
.attr("d", arc)
.style("fill", function(d) {
return d.fill;
})
.each(function(d) {
this._current = updateArc(d);
})
.on("click", zoomIn);
var textEnter = group.append("text")
.style("fill-opacity", 1)
.style("fill", "white")
.attr("text-anchor", "middle")
.attr("dy", ".2em")
.attr("transform", function(d) {
var angle = x(d.x + d.dx/2) * 180/Math.PI - 90;
return "translate(" + (arc.centroid(d)) + ")rotate(" + (angle > 90 ? 0 : 0) + ")";
}).on("click", zoomIn);
textEnter.append("tspan")
.attr("x", 0)
.text(function(d) {
return d.name;
});
textEnter.append("tspan")
.attr("x", 0)
.attr("dy", "1em")
.text(function(d) {
return d.depth ? d.name.split(" ")[1] || "" : "";
});
function zoomIn(p) {
if (p.depth > 1) {
p = p.parent;
}
if (!p.children)
return;
//alert(p.parent.name+" parent");
//alert(p.name+" p");
zoom(p, p);
}
function zoomOut(p) {
if (!p.parent)
return;
//alert(p.parent.name+" parent");
//alert(p.name+" p");
zoom(p.parent, p);
}
// Zoom to the specified new root.
function zoom(root, p) {
//textEnter.transition().attr("opacity", 0);
if (document.documentElement.__transition__)
return;
// Rescale outside angles to match the new layout.
var enterArc,
exitArc,
outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]);
function insideArc(d) {
return p.key > d.key
? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key
? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0}
: {depth: 0, x: 0, dx: 2 * Math.PI};
}
function outsideArc(d) {
return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)};
}
center.datum(root);
// When zooming in, arcs enter from the outside and exit to the inside.
// Entering outside arcs start from the old layout.
if (root === p)
enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]);
path = path.data(partition.nodes(root).slice(1), function(d) {
return d.key;
});
textEnter = textEnter.data(partition.nodes(root).slice(1), function(d) {
return d.key;
});
// When zooming out, arcs enter from the inside and exit to the outside.
// Exiting outside arcs transition to the new layout.
if (root !== p)
enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]);
d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function() {
path.exit().transition()
.style("fill-opacity", function(d) {
return d.depth === 1 + (root === p) ? 1 : 0;
})
.attrTween("d", function(d) {
return arcTween.call(this, exitArc(d));
})
.remove();
textEnter.data(partition.nodes(root).slice(1))
.transition()
.duration(500)
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
});
//d3.selectAll("path").remove();
//d3.selectAll("text").remove();
path.enter().append("path")
.style("fill-opacity", function(d) {
return d.depth === 2 - (root === p) ? 1 : 0;
})
.style("fill", function(d) {
return d.fill;
})
.on("click", zoomIn)
.each(function(d) {
this._current = enterArc(d);
});
textEnter.enter().append("text")
.style("fill", "white")
.attr("transform", function(d) {
var angle = x(d.x + d.dx/2) * 180/Math.PI - 90;
return "translate(" + (arc.centroid(d)) + ")rotate(" + (angle > 90 ? 0 : 0) + ")";
}).attr("text-anchor", "middle")
.text(function(d) {
return d.name;
}).on("click", zoomIn);
path.transition()
.style("fill-opacity", 1)
.attrTween("d", function(d) {
return arcTween.call(this, updateArc(d));
});
});
}
});