blocks|key|110726|text|使用window.onresize|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|110727|function+updateWindow(){
++++x+=+w.innerWidth+%7C%7C+e.clientWidth+%7C%7C+g.clientWidth;
++++y+=+w.innerHeight%7C%7C+e.clientHeight%7C%7C+g.clientHeight;

++++svg.attr("width",+x).attr("height",+y);
}
d3.select(window).on('resize.updatesvg',+updateWindow);|code-block|syntax|javascript|110728|http://jsfiddle.net/Zb85u/1/|110729|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/DOM/window.onresize|1^0|2|F|0|0|0|0|S|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|K|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|J]]]]

<p>Use <a href="https://developer.mozilla.org/en-US/docs/DOM/window.onresize" rel="noreferrer">window.onresize</a>:</p>

<pre><code>function updateWindow(){
    x = w.innerWidth || e.clientWidth || g.clientWidth;
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    svg.attr("width", x).attr("height", y);
}
d3.select(window).on('resize.updatesvg', updateWindow);
</code></pre>

<p><a href="http://jsfiddle.net/Zb85u/1/" rel="noreferrer">http://jsfiddle.net/Zb85u/1/</a></p>


blocks|key|110769|text|如果调整大小的代码几乎和构建图形的代码一样长，那就有点丑陋了。因此，与其调整现有图表的每个元素的大小，为什么不简单地重新加载它呢？下面是我的工作原理：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|110770|function+data_display(data){
+++e+=+document.getElementById('data-div');
+++var+w+=+e.clientWidth;
+++//+remove+old+svg+if+any+--+otherwise+resizing+adds+a+second+one
+++d3.select('svg').remove();
+++//+create+canvas
+++var+svg+=+d3.select('#data-div').append('svg')
+++++++++++++++++++++++++++++++++++.attr('height',+100)
+++++++++++++++++++++++++++++++++++.attr('width',+w);
+++//+now+add+lots+of+beautiful+elements+to+your+graph
+++//+...
}

data_display(my_data);+//+call+on+page+load

window.addEventListener('resize',+function(event){
++++data_display(my_data);+//+just+call+it+again...
}|code-block|syntax|javascript|110771|关键的一行是d3.select('svg').remove();。否则，每次调整大小都会在前一个元素下面添加另一个SVG元素。|offset|length|style|CODE|110772|entityMap^0|0|0|6|Q|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>It's kind of ugly if the resizing code is almost as long as the code for building the graph in first place. So instead of resizing every element of the existing chart, why not simply reloading it? Here is how it worked for me:</p>

<pre><code>function data_display(data){
   e = document.getElementById('data-div');
   var w = e.clientWidth;
   // remove old svg if any -- otherwise resizing adds a second one
   d3.select('svg').remove();
   // create canvas
   var svg = d3.select('#data-div').append('svg')
                                   .attr('height', 100)
                                   .attr('width', w);
   // now add lots of beautiful elements to your graph
   // ...
}

data_display(my_data); // call on page load

window.addEventListener('resize', function(event){
    data_display(my_data); // just call it again...
}
</code></pre>

<p>The crucial line is <code>d3.select('svg').remove();</code>. Otherwise each resizing will add another SVG element below the previous one. </p>


blocks|key|328106|text|在强制布局中，简单地设置“height”和“width”属性将无法将绘图重新居中/移动到svg容器中。然而，有一个非常简单的答案，适用于here的强制布局。总而言之：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|328107|使用你喜欢的相同(任意)事件。|328108|window.on('resize',+resize);|code-block|syntax|javascript|328109|然后假设你有svg和force变量：|328110|var+svg+=+/*+D3+Code+*/;
var+force+=+/*+D3+Code+*/;++++

function+resize(e){
++++//+get+width/height+with+container+selector+(body+also+works)
++++//+or+use+other+method+of+calculating+desired+values
++++var+width+=+$('#myselector').width();+
++++var+height+=+$('#myselector').height();+

++++//+set+attrs+and+'resume'+force+
++++svg.attr('width',+width);
++++svg.attr('height',+height);
++++force.size([width,+height]).resume();
}|328111|通过这种方式，您不需要重新渲染整个图形，我们设置属性，然后d3根据需要重新计算。至少当你使用一个重力点时，这是可行的。我不确定这是否是这个解决方案的先决条件。任何人能证实或否认吗？|328112|干杯，g|328113|entityMap|0|LINK|mutability|MUTABLE|url|http://bl.ocks.org/mbostock/3355967^0|1W|4|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>In force layouts simply setting the 'height' and 'width' attributes will not work to re-center/move the plot into the svg container. However, there's a very simple answer that works for Force Layouts found <a href="http://bl.ocks.org/mbostock/3355967" rel="noreferrer">here</a>. In summary: </p>

<p>Use same (any) eventing you like.</p>

<pre><code>window.on('resize', resize);
</code></pre>

<p>Then assuming you have svg &amp; force variables: </p>

<pre><code>var svg = /* D3 Code */;
var force = /* D3 Code */;    

function resize(e){
    // get width/height with container selector (body also works)
    // or use other method of calculating desired values
    var width = $('#myselector').width(); 
    var height = $('#myselector').height(); 

    // set attrs and 'resume' force 
    svg.attr('width', width);
    svg.attr('height', height);
    force.size([width, height]).resume();
}
</code></pre>

<p>In this way, you don't re-render the graph entirely, we set the attributes and d3 re-calculates things as necessary. This at least works when you use a point of gravity. I'm not sure if that's a prerequisite for this solution. Can anyone confirm or deny ? </p>

<p>Cheers, g</p>


blocks|key|110870|text|如果您想要绑定自定义逻辑来调整事件大小，您可以开始使用ResizeObserver+browser+API作为SVGElement的边界框。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|110871|这也将处理容器因附近元素大小更改而调整大小时的情况。|110872|有一个用于更广泛的浏览器支持的polyfill。|110873|下面是它在UI组件中的工作方式：|110874|​|110875|function+redrawGraph(container,+{+width,+height+})+{
++d3
++++.select(container)
++++.select('svg')
++++.attr('height',+height)
++++.attr('width',+width)
++++.select('rect')
++++.attr('height',+height)
++++.attr('width',+width);
}

//+Setup+observer+in+constructor
const+resizeObserver+=+new+ResizeObserver((entries,+observer)+=>+{
++for+(const+entry+of+entries)+{
++++//+on+resize+logic+specific+to+this+component
++++redrawGraph(entry.target,+entry.contentRect);
++}
})

//+Observe+the+container
const+container+=+document.querySelector('.graph-container');
resizeObserver.observe(container)|code-block|syntax|javascript|110876|.graph-container+{
++height:+75vh;
++width:+75vw;
}

.graph-container+svg+rect+{
++fill:+gold;
++stroke:+steelblue;
++stroke-width:+3px;
}|110877|<script+src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<figure+class="graph-container">
++<svg+width="100"+height="100">
++++<rect+x="0"+y="0"+width="100"+height="100"+/>
++</svg>
</figure>|110878|110879|//+unobserve+in+component+destroy+method
this.resizeObserver.disconnect()|110880|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|1|https://github.com/que-etc/resize-observer-polyfill^0|R|Q|0|0|0|F|8|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|D|3|E|5|6|7|1B|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1H|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1I|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|N|7|1J|8|@]|9|@]|C|$O|P]]|$1|S|3|T|5|N|7|1K|8|@]|9|@]|C|$O|P]]|$1|U|3|K|5|6|7|1L|8|@]|9|@]|C|$]]|$1|V|3|W|5|N|7|1M|8|@]|9|@]|C|$O|P]]|$1|X|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|Y|$Z|$5|10|11|12|C|$13|14]]|15|$5|10|11|12|C|$13|16]]]]

<p>If you want to bind custom logic to resize event, <a href="https://caniuse.com/#search=resizeobserver" rel="nofollow noreferrer">nowadays</a> you may start using <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver" rel="nofollow noreferrer">ResizeObserver browser API</a> for the bounding box of an SVGElement.<br>
This will also handle the case when container is resized because of the nearby elements size change.<br>
There is a <a href="https://github.com/que-etc/resize-observer-polyfill" rel="nofollow noreferrer">polyfill</a> for broader browser support.</p>

<p>This is how it may work in UI component:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function redrawGraph(container, { width, height }) {
  d3
    .select(container)
    .select('svg')
    .attr('height', height)
    .attr('width', width)
    .select('rect')
    .attr('height', height)
    .attr('width', width);
}

// Setup observer in constructor
const resizeObserver = new ResizeObserver((entries, observer) =&gt; {
  for (const entry of entries) {
    // on resize logic specific to this component
    redrawGraph(entry.target, entry.contentRect);
  }
})

// Observe the container
const container = document.querySelector('.graph-container');
resizeObserver.observe(container)</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.graph-container {
  height: 75vh;
  width: 75vw;
}

.graph-container svg rect {
  fill: gold;
  stroke: steelblue;
  stroke-width: 3px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;

&lt;figure class="graph-container"&gt;
  &lt;svg width="100" height="100"&gt;
    &lt;rect x="0" y="0" width="100" height="100" /&gt;
  &lt;/svg&gt;
&lt;/figure&gt;</code></pre>
</div>
</div>
</p>

<pre><code>// unobserve in component destroy method
this.resizeObserver.disconnect()
</code></pre>


blocks|key|328373|text|对于那些在D3+v4/v5中使用强制有向图的人，size方法已不复存在。下面的内容对我很有效(基于this+github+issue)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|328374|simulation
++++.force("center",+d3.forceCenter(width+/+2,+height+/+2))
++++.force("x",+d3.forceX(width+/+2))
++++.force("y",+d3.forceY(height+/+2))
++++.alpha(0.1).restart();|code-block|syntax|javascript|328375|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/d3/d3-force/issues/54^0|O|4|1D|H|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>For those using force directed graphs in D3 v4/v5, the <code>size</code> method doesn't exist any more. Something like the following worked for me (based on <a href="https://github.com/d3/d3-force/issues/54" rel="nofollow noreferrer">this github issue</a>):</p>

<pre><code>simulation
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("x", d3.forceX(width / 2))
    .force("y", d3.forceY(height / 2))
    .alpha(0.1).restart();
</code></pre>


blocks|key|110948|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|110949|d3.select("div#chartId")
+++.append("div")
+++//+Container+class+to+make+it+responsive.
+++.classed("svg-container",+true)+
+++.append("svg")
+++//+Responsive+SVG+needs+these+2+attributes+and+no+width+and+height+attr.
+++.attr("preserveAspectRatio",+"xMinYMin+meet")
+++.attr("viewBox",+"0+0+600+400")
+++//+Class+to+make+it+responsive.
+++.classed("svg-content-responsive",+true)
+++//+Fill+with+a+rectangle+for+visualization.
+++.append("rect")
+++.classed("rect",+true)
+++.attr("width",+600)
+++.attr("height",+400);|code-block|syntax|javascript|110950|.svg-container+{
++display:+inline-block;
++position:+relative;
++width:+100%25;
++padding-bottom:+100%25;+/*+aspect+ratio+*/
++vertical-align:+top;
++overflow:+hidden;
}
.svg-content-responsive+{
++display:+inline-block;
++position:+absolute;
++top:+10px;
++left:+0;
}

svg+.rect+{
++fill:+gold;
++stroke:+steelblue;
++stroke-width:+5px;
}|110951|<script+src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<div+id="chartId"></div>|110952|110953|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>d3.select("div#chartId")
   .append("div")
   // Container class to make it responsive.
   .classed("svg-container", true) 
   .append("svg")
   // Responsive SVG needs these 2 attributes and no width and height attr.
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 600 400")
   // Class to make it responsive.
   .classed("svg-content-responsive", true)
   // Fill with a rectangle for visualization.
   .append("rect")
   .classed("rect", true)
   .attr("width", 600)
   .attr("height", 400);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
}
.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}

svg .rect {
  fill: gold;
  stroke: steelblue;
  stroke-width: 5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;

&lt;div id="chartId"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I'm drawing a scatterplot with d3.js. With the help of this question :<br>
<a href="https://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa">Get the size of the screen, current web page and browser window</a></p>

<p>I'm using this answer :</p>

<pre><code>var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
</code></pre>

<p>So I'm able to fit my plot to the user's window like this :</p>

<pre><code>var svg = d3.select("body").append("svg")
        .attr("width", x)
        .attr("height", y)
        .append("g");
</code></pre>

<p>Now I'd like that something takes care of resizing the plot when the user resize the window.</p>

<p>PS : I'm not using jQuery in my code.</p>


Resize svg when window is resized in d3.js

容器

jQuery

我正在用d3.js绘制散点图。在这个问题的帮助下：我用的是这个答案：var w = window,    d = document,    e = d.documentElement,    g = d.getElementsByTagName('body')[0],    x = w.innerWidth || e....

问在d3.js中调整窗口大小时调整svg大小
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在d3.js中调整窗口大小时调整svg大小EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在d3.js中调整窗口大小时调整svg大小
EN