Comment puis-je traduire d3.js les nœuds?

J'ai un d3 force dirigée graphe qui contient un groupe de nœuds:

var node = vis.selectAll("g.node")
              .data(json.nodes)
              .enter().append("svg:g")
              .attr("class", "node")
              .attr("id", function(d) { return "node" + d.index; })
              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
              .call(force.drag);

Cela rend très bien.

Maintenant, j'aimerais traduire (déplacer) ces nœuds 200 pixels vers la droite quand je montre un détail div avec l'id detail_container.

J'ai essayé la suite, mais rien ne se passe pour les nœuds, quand je suis detail_container (autre que de montrer le détail div):

$('#detail_container').fadeIn('slow', function() {
    d3.selectAll("g.node").attr("transform", function(d) { return "translate(200, 0)"; });
});

La d3.selectAll("g.node") déclaration contient le nœud de données, je peux le confirmer en regardant les données dans la console:

console.log(d3.selectAll("g.node"));

Comme une autre approche, j'ai attaché le zoom/pan comportement à mon graphe:

var vis = d3.select("#position")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .attr("pointer-events", "all")
            .append("svg:g")
            .call(d3.behavior.zoom().on("zoom", redraw))
            .append("svg:g");

Cela fonctionne bien. Cependant, cette interagit avec la souris, pas avec les événements qui se produisent dans mon programme, donc, il y a un programmatique d'appeler le zoom/pan comportement, de sorte que je peux faire la traduction je veux?

OriginalL'auteur Alex Reynolds | 2012-04-11

  1. 7

    Si vous voulez juste à se déplacer les nœuds vers la droite, puis vous pouvez accomplir que par la définition d'une transformation, utilisez uniquement le comportement du zoom si vous voulez interactif de panoramique et de zoom.

    Il n'est pas clair pour moi pourquoi rien ne se passe lorsque vous sélectionnez les nœuds et définir une transformation, mais un problème que je vois c'est qu'en définissant l'attribut transform sur les nœuds directement, vous êtes en écrasant la x & y de la position par la force de mise en page. Donc, vous voulez probablement mettre tous les nœuds à l'intérieur d'un autre élément G, de sorte que vous pouvez compenser par la modification de la transformer sur le contenant plutôt que le chacun des nœuds. Le DOM ressemblerait à ceci:

    <g class="nodes">
  <g class="node" transform="translate(42,128)">
    <circle r="2.5">
    <text>First Node</text>
  </g>
  <g class="node" transform="translate(64,501)">
    <circle r="2.5">
    <text>Second Node</text>
  </g>
  …
</g>

    Alors, si vous voulez changer toutes les nœuds à droite par 200px, c'est juste:

    d3.select(".nodes").attr("transform", "translate(200,0)");

    Et pour revenir à la maj, retirer le récipient de la transformer:

    d3.select(".nodes").attr("transform", null);

    Si l'on voulait être vraiment de fantaisie, une autre façon de réaliser cet effet, il conviendrait de modifier le centre de gravité de la force de mise en page, puis réchauffer le graphique quand vous choisissez d'afficher ou de masquer les détails de la DIV. Ce sera la cause de l'nœuds de douceur, de passer dans une nouvelle position pour faire la manière pour le conteneur de détails. Vous pouvez voir un exemple dans le Shan Carter de visualisation, Quatre Façons de Tranche d'Obama Proposition de Budget 2013: cliquez sur les "Types de Dépenses" bouton et regardez les cercles recentrer. Ou, voir cet exemple sur la coutume de la gravité.

    OriginalL'auteur mbostock