Ich brauche die Breite und Höhe einer Gruppe, mit anderen Worten, ich brauche die maximale Breite und Höhe, die alle Elemente in der Gruppe berücksichtigt. Dieser Code sollte beispielsweise 400/280 drucken, aber stattdessen null / null drucken. Muss das manuell berechnet werden?

        var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 500)
                        .attr("height", 500);
        var g = svg.append('g');

        g.append('rect').attr('type',1)                                         
                        .attr("width", 400)
                        .attr("height", 200);

        g.append('rect').attr('type',3)
                        .attr("width", 300)
                        .attr("height", 280);

        console.log(g.attr('width'));
        console.log(g.attr('height'));
0
ps0604 8 Feb. 2020 im 17:16

3 Antworten

Beste Antwort

Um die Breite und Höhe zu erhalten, verwenden Sie einfach Folgendes:

g.node().getBBox();

Arbeitsausschnitt:

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);
var g = svg.append('g');

g.append('rect').attr('type',1)                                         
  .attr("width", 400)
  .attr("height", 200)
  .attr('fill', 'red');

g.append('rect').attr('type',3)
  .attr("width", 300)
  .attr("height", 280);

console.log(g.node().getBBox());
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js"></script>
</body>

Dies wird zurückkehren:

{
  "x": 0,
  "y": 0,
  "width": 400,
  "height": 280
}
1
Ma'moun othman 10 Feb. 2020 im 17:29

Es gibt einige Dinge, die mit der Funktion getElementById() schief gehen können. Stellen Sie zunächst sicher, dass sich das Tag unter dem Körper befindet und nicht darin, da dies alles verwirren würde. Selbst wenn Sie sich entscheiden, es mithilfe der SRC-Eigenschaft eines Tags zu verknüpfen, sollten Sie es unten platzieren. Deklarieren Sie auch nur das Objekt, aber NICHT die Eigenschaften, nach denen Sie suchen, während Sie die Eigenschaften unten abrufen.

Hoffe das hilft!

-Vegetarisch

0
Veggieoskibroski 8 Feb. 2020 im 14:35

Ich denke, beim Drucken fehlt möglicherweise "Rect"

g.append('rect').attr('type',3)

console.log(g.attr('width'));
0
Aishwarya Kathavarayan 8 Feb. 2020 im 14:26