D3 Wie Element gleiche Größe zu halten, während Maßstab verwandeln/translate

Dieses Beispiel zeigt mein Problem: https://bl.ocks.org/feketegy/ce9ab2efa9439f3c59c381f567522dd3 D3 Wie Element gleiche Größe zu halten, während Maßstab verwandeln/translate

Ich habe ein paar Pfade in einem Gruppenelement, und ich mag diese Elemente außer dem blauen Rechteck Weg zum Verschieben/Zoom , die in einem anderen Gruppenelement ist.

Das Zoomen und Verschieben erfolgt durch Anwenden von transform="translate(0,0) scale(1) auf das äußerste Gruppenelement, dann Erfassen des Zoom-Deltas und Anwenden auf das Gruppenelement same-size, um dieselbe Größe beizubehalten.

Dies funktioniert, aber die blaue Rechteckposition, die die gleiche Größe haben sollte, ist durcheinander, ich möchte sie in der gleichen relativen Position zu den anderen Pfaden halten.

Die gerenderte HTML-Struktur sieht wie folgt aus:

<svg width="100%" height="100%"> 
    <g class="outer-group" transform="translate(0,0)scale(1)"> 
    <path d="M100,100 L140,140 L200,250 L100,250 Z" fill="#cccccc" stroke="#8191A2" stroke-width="2px"></path> 
    <path d="M400,100 L450,100 L450,250 L400,250 Z" fill="#cccccc" stroke="#8191A2" stroke-width="2px"></path> 

    <g class="same-size-position" transform="translate(300,250)"> 
     <g class="same-size" transform="scale(1)"> 
     <path d="M0,0 L50,0 L50,50 L0,50 Z" fill="#0000ff"></path> 
     </g> 
    </g> 
    </g> 
</svg>

Ich habe versucht, die X/Y-Position der same-size-position Gruppe zu erhalten und ein Delta von der x/y der outer-group übersetzen zu schaffen, aber das scheint nicht zu funktionieren.

Quelle

2017-10-24 feketegy

Für mich sieht es so aus, als ob das blaue Rechteck seine korrekte Position behält (das heißt, seine obere linke Ecke tut es). – zinfandel

Die Berechnung, die ich suche, ist, wie Google Maps es mit seinen POI (Point-of-Interest) -Symbolen macht, es bleibt die gleiche Größe und in der gleichen Position relativ zu anderen Pfaden. In meinem Fall wird es Szenarien geben, in denen das blaue Rechteck über anderen Pfaden liegen würde. – feketegy

Nach dem Abstauben meiner High School Geometrie Bücher fand ich eine Lösung.

Sie benötigen den Begrenzungsrahmen des Elements erhalten Sie eine Matrixumwandlung auf sie wie so die gleiche Größe und berechnen behalten wollen:

const zoomDelta = 1/d3.event.transform.k; 

const sameSizeElem = d3.select('.same-size'); 
const bbox = sameSizeElem.node().getBBox(); 

const cx = bbox.x + (bbox.width/2); 
const cy = bbox.y + (bbox.height/2); 
const zx = cx - zoomDelta * cx; 
const zy = cy - zoomDelta * cy; 

sameSizeElem 
    .attr('transform', 'matrix(' + zoomDelta + ', 0, 0, ' + zoomDelta + ', ' + zx + ', ' + zy + ')');

Die Matrix-Transformation wird die relative Position des Elements halten welche Größe gleich bleibt und die anderen Elemente schwenken/zoomen.

Quelle

2017-11-17 09:56:23 feketegy

D3 Wie Element gleiche Größe zu halten, während Maßstab verwandeln/translate

Antwort

Verwandte Themen