Graphique de jauge D3js

Je commence avec d3js http://d3js.org et tout ce dont j'ai besoin au début est une icône de jauge. Il affiche combien de temps d'enchères sont épuisés et dans lesquels l'enchère d'état est. Il y aura plus d'icônes sur la page. Voici le violon http://jsfiddle.net/TdWtC/

La première charge est correcte, mais j'ai besoin d'aide pour la mise à jour. Lors de la mise à jour, il faut mettre à jour l'arrière-plan et le pointeur. Le problème principal est que sur l'arrière-plan de mise à jour chevauche le pointeur. Probablement je le fais complètement faux, mais j'ai personnalisé un extrait similaire et je ne peux pas continuer.

C'est la partie où l'arrière-plan chevauche le pointeur

this.body.append("svg:path") .style("fill", color) .attr("d", d3.svg.arc() .startAngle(this.valueToRadians(start)) .endAngle(this.valueToRadians(end)) .innerRadius(0.4 * this.config.raduis) .outerRadius(this.config.raduis)) .attr("transform", function() { return "translate(" + self.config.cx + ", " + self.config.cy + ") rotate(270)" });

Merci pour l'aide

Le problème est que vous les bandes de la jauge ne sont pas contenues dans leur propre élément. Tous les appels de mise à jour ajoutent les bandes après l'élément g pour le pointeur, apparaissant ainsi sur le dessus. Vous pouvez régler cela facilement en mettant les bandes dans leur propre élément g qui est ajouté avant le g pour le pointeur.

J'ai apporté ces changements ici et j'ai également déduit votre code un peu – vous n'avez pas besoin de passer les bandes individuellement à d3, il peut s'occuper de les dessiner tous en même temps. Notez que je ne manipule que la sélection .enter() (c'est-à-dire les nouveaux éléments) car vous ne modifiez aucune donnée dans les appels de update() . Pour que cela fonctionne pour les données modifiées, vous devriez implémenter un gestionnaire pour la sélection .exit() (supprimer des éléments, probablement simplement segments.exit().remove() ) et la sélection mise à jour (probablement le code que vous êtes En utilisant pour définir les angles de début et de fin pour la sélection .enter() ).