Question

我使用D3绘制一个带有边框矩形的自定义图形。在窗口调整大小时，我重新计算SVG大小并想重绘此边框。我目前在drawGraph()函数中执行此操作，调用resize / new数据时调用此函数：

...
svg.selectAll('rect')
     .data([true])
     .attr('width', w)
     .attr('height', h)
     .enter()
     .append('rect')
     .attr('x', 0)
     .attr('y', 0)
     .attr('width', w)
     .attr('height', h)
     .style('fill', 'none')
...

即。 - 我将数组（[true]）中的单个值绑定到选择中，以便我可以绘制框，或者只是在已经绘制一次的情况下更改其大小。它肯定有效，但绑定数据有点奇怪，这些数据肯定会被忽略，并且可能是一种稍微有点做事的方式。

这是一个很常用的惯例，还是有另一种标准的方法，例如：

我没有遇到的D3方法
只需使用svg.append('rect')，然后在调整大小
svg.selectAll('*').remove()并从头开始重新绘制所有内容？
其他

Answer 1

删除和重绘元素是我在D3中称为延迟编码或延迟更新的内容。

话虽如此，为什么不简单地将矩形分配给变量并在调整大小时更改它？这样的事情（点击＆＃34;整页＆＃34;并调整窗口大小）：

＆＃13;

var div = document.getElementById("div");
var svg = d3.select("svg")
var rect = svg.append("rect")//here you define your rectangle
  .attr("width", 300)
  .attr("height", 150)
  .attr("stroke-width", 3)
  .attr("stroke", "black")
  .attr("fill", "none");

function resize() {
  var width = div.clientWidth;

  svg.attr("width", width)
    .attr("height", width / 2);
  
  //here you just change its width and height
  rect.attr("width", width)
    .attr("height", width / 2);
}

window.addEventListener("resize", resize);

＆＃13;

svg {
  background-color: tan;
}

＆＃13;

<script src="//d3js.org/d3.v4.min.js"></script>
<div id="div">
  <svg></svg>
</div>

＆＃13;

D3公约（重新）绘制单个对象

1 个答案: