d3 div不会在属性更改时更改大小

Question

我的角度应用程序中有一个饼图。饼图既是饼图又是图例。由于某些原因，无论何时选择图例，我都无法在d3中更改div的宽度和高度。我可以毫无问题地更改svg元素的宽度和高度。

---

这是我当前拥有的代码：

  buildSvg() {
    this.host.html('').attr('class', 'host');

    this.svg = d3
      .select('.host')
      .append('svg')
      .attr('width', this.size[0])
      .attr('height', this.size[1])
      .attr('class', 'pie-chart')
      .append('g')
      .attr('transform', `translate(${this.size[0] / 2},${this.size[1] / 2})`)
      .attr('class', 'pie-content');

    this.legend = d3
      .select('.host')
      .append('div')
      .attr('class', 'legend');

    d3.select('.legend')
      .attr('width', this.size[0])
      .attr('height', this.size[1]);
  }

Answer 1

Svg和html有细微的差别。您不能以与svg相同的方式为div分配宽度/高度。最好的方法是使用适当的CSS格式设置style属性；参见下面的示例

div.a {
 background-color: red;
}

div.b {
 background-color: green;
}

<div class="a" width="100" height="100">width="100" height="100"</div>
<div class="b" style="width: 100px; height: 100px">style="width: 100px; height: 100px"</div>