Question

这个很简单，但非常奇怪：

var dims = this.placeholder.node().getBoundingClientRect();

this.mapContainer = d3.select('body').append('div')
  .classed('map-container', true)
  .style({
    position : 'absolute',
    width : dims.width,
    height : dims.height,
    top : dims.top,
    left : dims.left
  });

dims.width，dims.height等返回非零值，但我得到的div只是普通<div class="container" style="position:absolute;"></div>

我可以在控制台中设置其他样式值（d3.select('.map-container').style({color:'red','background-color':'blue'})正常工作），但设置宽度d3.select('.map-container').style({width:30,top:40})什么都不做。

这是一个直接的jsbin，它也不起作用：http://jsbin.com/gequrasivo/1/edit?html,js,output

这里发生了什么？

Answer 1

这是因为CSS样式值需要一个单位。

this.mapContainer = d3.select('body').append('div')
  .classed('map-container', true)
  .style({
    position : 'absolute',
    width : dims.width + 'px',
    height : dims.height + 'px',
    top : dims.top + 'px',
    left : dims.left + 'px'
  });

工作正常。

d3.style不会设置HTML元素的宽度

1 个答案: