Combiner traduire et tourner avec D3

Très probablement ce répète certains de cette SORTE de questionmais le code est trop compliqué et que l'OP n'a pas ajouté une solution de code. Et ce une question relative à la n'est plus reproductible.

J'essaie de comprendre comment les combiner rotations et des translations dans le bon ordre. Il est possible de tourner autour de l'origine comme dans cet exemple. Mais lorsque nous suivons cela avec une traduction de l'original de rotation est annulée.

Est-il possible de structurer ce pour corriger application séquentielle?

jsfidle code:

HTML:

<script src="http://d3.geotheory.co.uk/d3-transform.js"></script>

SVG:

var svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 300);

//Draw the Rectangle
var rect = svg.append("rect")
    .attr("x", 0).attr("y", 0)
    .attr("width", 50).attr("height", 100)
    .style("fill", "purple");

var rotate = d3.svg.transform().rotate(-45);
var translate = d3.svg.transform().translate(200, 100);

rect.attr('transform', rotate);

var rect2 = rect.attr('transform', rotate);
rect2.attr('transform', translate);

source d'informationauteur geotheory

  1. 14

    Vous êtes à la création de deux différentes transformations. Attribuer un ne pas ajouter à l'autre. C'est, en fait

    rect2.attr('transform', translate);

    vous êtes à l'annulation de la première, car il est écrasé.

    D'avoir les deux, ajoutez-les à la fois à une transition, par exemple

    var rotateTranslate = d3.svg.transform().rotate(-45).translate(200, 100);
rect2.attr('transform', rotateTranslate);

    Pour ce faire de manière dynamique, vous aurez besoin de faire quelque chose comme cela.

    .attr("transform", function() {
    return d3.svg.transform()
        .translate(200, 100)
        .rotate(-45)
        .translate(-d3.select(this).attr("width")/2, -d3.select(this).attr("height")/2)();
}

    Complète jsfiddle ici.

  2. 7

    Si vous êtes à la recherche pour ce faire, dans D3 version 4.x+ vous pouvez le faire comme ceci:

    .attr('transform', 'translate(200,100)rotate(-45)')

    https://bl.ocks.org/mbostock/1345853