web-dev-qa-db-ja.com

D3.js：任意の要素の計算された幅と高さを取得する方法は？

g内の任意のSVG要素の幅と高さを正確に知る必要があります。ユーザーがクリックすると、その周囲に選択マーカーを描く必要があるからです。

私がインターネットで見たものは、d3.select("myG").style("width")のようなものです。問題は、要素に明示的な幅属性セットが常にあるとは限らないことです。たとえば、g内に円を作成すると、幅の代わりに半径（r）が設定されます。 circleでwindow.getComputedStyleメソッドを使用しても、「auto」が返されます。

D3の任意のsvg selementの幅を計算する方法はありますか？

ありがとうございました。

javascriptd3.js
113
André Pena

SVG要素の場合

selection.node().getBBox()のようなものを使用すると、次のような値を取得します

{
    height: 5, 
    width: 5, 
    y: 50, 
    x: 20
}

HTML要素の場合

selection.node().getBoundingClientRect()を使用します

207
Christopher Hackett

。getBoundingClientRect（）は、要素のサイズとビューポートに対するその位置を返します。

  • 左右
  • 上、下
  • 高さ、幅

例：

var element = d3.select('.elementClassName').node();
element.getBoundingClientRect().width;
24
Malik Khalil

一度変数に保存された要素（svgまたはhtml）がわからないときに問題に直面しましたが、幅と高さを取得する必要がありました。この関数を作成し、共有したい：

function computeDimensions(selection) {
  var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGElement) { // check if node is svg element
    dimensions = node.getBBox();
  } else { // else is html element
    dimensions = node.getBoundingClientRect();
  }
  console.log(dimensions);
  return dimensions;
}

以下の非表示のスニペットにある小さなデモ。青いdivと赤いsvg円のクリックを同じ機能で処理します。

var svg = d3.select('svg')
  .attr('width', 50)
  .attr('height', 50);

function computeDimensions(selection) {
        var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGElement) {
        dimensions = node.getBBox();
  } else {
        dimensions = node.getBoundingClientRect();
  }
  console.clear();
  console.log(dimensions);
  return dimensions;
}

var circle = svg
    .append("circle")
    .attr("r", 20)
    .attr("cx", 30)
    .attr("cy", 30)
    .attr("fill", "red")
    .on("click", function() { computeDimensions(circle); });
    
var div = d3.selectAll("div").on("click", function() { computeDimensions(div) });
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

.div {
  display: inline-block;
  background-color: blue;
  margin-right: 30px;
  width: 30px;
  height: 30px;
}
<h3>
  Click on blue div block or svg circle
</h3>
<svg></svg>
<div class="div"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
1
Mikhail Shabrikov