Réorganiser les éléments de SVG ( z-index ) D3.js

Je me rends compte que cette question a été posée mais je ne peux pas aller au fond des choses.

Voici mon graphique... http://www.gogeye.com/financialnews/piechart/index3.html

Tout ce que je veux faire est d'avoir la pièce rendre derrière le graphe. Je sais D3 rend dans l'ordre où elles sont jointes en annexe.

J'ai essayé d'ajouter la pièce mais ne semble pas possible de le faire fonctionner.

J'ai essayé de réorganisation quand les choses sont ajoutés dans les DOM, mais continue à obtenir des erreurs sans doute parce que les variables sont appelé avant d'être définie etc.

Quelqu'un peut-il me donner un exemple de comment résoudre ce problème avec mon code? Je ne veux pas vous faire le travail pour moi, mais j'ai été en tirant sur mes cheveux depuis si longtemps, je n'arrive pas à appliquer d'autres peuples exemples à la mienne.

grâce

Pouvez-vous nous montrer ton code?
son tout sur le lien... view-source:gogeye.com/financialnews/piechart/index3.html dois-je le mettre dans le post?
Peut-être que vous pourriez décrire votre problème un peu plus clairement. Vous dites "je sais D3 rend dans l'ordre où elles sont ajoutées" (en Fait, ça n'a rien à voir avec D3, mais plutôt SVG, mais assez proche.) Cela étant le cas, ce n'est pas de travail. N'êtes-vous pas en mesure de comprendre comment faire pour ajouter du contenu dans l'ordre souhaité? Êtes-vous d'ajouter dans le bon ordre, mais il n'est pas rendu correctement? Êtes-vous essayer d'inverser l'ordre des contenus existants? ...
Désolé, je suis assez nouveau dans le javascript et tout à fait nouvelle pour la D3. Je pense que la pièce est en ajoutant après le graphique, et donc en face de lui. Je voudrais savoir comment cibler et re-ajouter la pièce par la suite. Ou si il y a quelque chose que j'ai fait de mal, qui ne permettra pas que, peut-être que je peux essayer et ajouter la pièce de monnaie, d'abord à partir de l'obtenir-aller, mais le fait d'avoir très mal. Peut-être que je vais essayer de le copier dans un nouveau fichier et le swap tout autour. Mes premières tentatives qui ont été assez catastrophiques si

OriginalL'auteur bboybeatle | 2014-06-04

  1. 29

    Je recommande la création d'certaines "couches" en utilisant svg g éléments, qui signifie "groupe".

    Lorsque vous effectuez le rendu de votre graphique, vous pouvez d'abord définir vos couches:

    var layer1 = svg.append('g');
var layer2 = svg.append('g');
var layer3 = svg.append('g');
//etc... for however many layers you need

    Ensuite, lorsque vous ajoutez de nouveaux éléments, vous pouvez décider de la couche sur laquelle vous voulez être sur, et il n'a pas d'importance quel ordre vous les attribuer, parce que les éléments du groupe ont déjà été ajoutés à la DOM, et sont commandés. Par exemple:

    var layer1 = svg.append('g');
var layer2 = svg.append('g');

var redCircle = layer2.append('circle')
    .attr('cx', 50)
    .attr('cy', 50)
    .attr('r', 16)
    .attr('fill', 'red')

var blueSquare = layer1.append('rect')
    .attr('x', 25)
    .attr('y', 25)
    .attr('width', 50)
    .attr('height', 50)
    .attr('fill', 'blue');

    Dans ce cas, le cercle rouge est visible au-dessus du carré bleu, même si le carré bleu a été créé en dernier. C'est parce que le cercle et le carré sont des enfants de différents éléments d'un groupe, qui sont dans un ordre pré-établi.

    Voici un VIOLON de l'exemple ci-dessus de sorte que vous pouvez le voir en action.

    Cela doit prendre beaucoup de la conjecture hors de quand à ajouter certains éléments de votre tableau, et il aide également à organiser vos éléments dans un plus disposition logique. Espère que ça aide, et bonne chance.

    Serait-il possible de changer de calque qui est en haut et ce qui est en bas par programmation?
    Nice. C'est un très élégant et lisible pour accomplir exactement ce qui est demandé.

    OriginalL'auteur jshanley