blocks|key|149265|text|对于SVG元素|type|unstyled|depth|inlineStyleRanges|entityRanges|data|149266|使用像selection.node().getBBox()这样的东西，你会得到这样的值|offset|length|style|CODE|149267|{
++++height:+5,+
++++width:+5,+
++++y:+50,+
++++x:+20
}+|code-block|syntax|javascript|149268|对于HTML元素|149269|使用selection.node().getBoundingClientRect()|149270|entityMap^0|0|3|Q|0|0|0|2|14|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<h1>For SVG elements</h1>

<p>Using something like <code>selection.node().getBBox()</code> you get values like</p>

<pre><code>{
    height: 5, 
    width: 5, 
    y: 50, 
    x: 20
} 
</code></pre>

<h1>For HTML elements</h1>

<p>Use <code>selection.node().getBoundingClientRect()</code></p>


blocks|key|149310|text|有一次，当我不知道哪个元素当前存储在我的变量(svg或html)中时，我遇到了这个问题，但我需要获取它的宽度和高度。我创建了这个函数，并想分享它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|149311|function+computeDimensions(selection)+{
++var+dimensions+=+null;
++var+node+=+selection.node();

++if+(node+instanceof+SVGGraphicsElement)+{+//+check+if+node+is+svg+element
++++dimensions+=+node.getBBox();
++}+else+{+//+else+is+html+element
++++dimensions+=+node.getBoundingClientRect();
++}
++console.log(dimensions);
++return+dimensions;
}|code-block|syntax|javascript|149312|下面隐藏的代码片段中的小演示。我们使用相同的功能处理蓝色div和红色svg圆圈上的单击。|149313|​|149314|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)+});|149315|*+{
++margin:+0;
++padding:+0;
++border:+0;
}

body+{
++background:+#ffd;
}

.div+{
++display:+inline-block;
++background-color:+blue;
++margin-right:+30px;
++width:+30px;
++height:+30px;
}|149316|<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>|149317|149318|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|Q|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>Once I faced with the issue when I did not know which the element currently stored in my variable (svg or html) but I needed to get it width and height. I created this function and want to share it:</p>
<pre><code>function computeDimensions(selection) {
  var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGGraphicsElement) { // check if node is svg element
    dimensions = node.getBBox();
  } else { // else is html element
    dimensions = node.getBoundingClientRect();
  }
  console.log(dimensions);
  return dimensions;
}
</code></pre>
<p>Little demo in the hidden snippet below. We handle click on the blue div and on the red svg circle with the same function.</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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) });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

.div {
  display: inline-block;
  background-color: blue;
  margin-right: 30px;
  width: 30px;
  height: 30px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;
  Click on blue div block or svg circle
&lt;/h3&gt;
&lt;svg&gt;&lt;/svg&gt;
&lt;div class="div"&gt;&lt;/div&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


<p>I need to know exactly the width and height for an arbitrary <code>g</code> element in my <code>SVG</code> because I need to draw a selection marker around it once the user has clicked it.</p>

<p>What I've seen in the internet is something like: <code>d3.select("myG").style("width")</code>. The problem is that the element will not always have an explicit width attribute set. For instance, when I create a circle inside the <code>g</code>, it will have the radious (<code>r</code>) set instead of the width. Even if I use the <code>window.getComputedStyle</code> method on a <code>circle</code>, it will return "auto".</p>

<p>Is there a way to calculate the width of an arbitrary <code>svg</code> selement in <code>D3</code>?</p>

<p>Thank you.</p>


D3.js: How to get the computed width and height for an arbitrary element?

我需要知道SVG中任意g元素的确切宽度和高度，因为一旦用户单击它，我就需要在它周围绘制一个选择标记。我在互联网上看到的类似于：d3.select("myG").style("width")。问题是元素并不总是有一个显式的width属性集。例如，当我在g中创建一个圆时，它将设置半径(r)而不是宽度。即使我在circle上...

问D3.js:如何计算任意元素的宽度和高度？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3.js:如何计算任意元素的宽度和高度？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3.js:如何计算任意元素的宽度和高度？
EN