使用D3设置div宽度

Question

我在div

中创建了html

<div id="search"></div>

我想在Javascript中将其宽度设置为窗口宽度的15％。我尝试使用D3来执行此操作：

var width = 0.15 * window.innerWidth,
    height = 0.95 * window.innerHeight;

var searchcolumn = d3.select("#search")
                    .attr("width", width)
                    .attr("height", height);

我可以在DOM中看到我的div的宽度和高度已被更改：

但是，在呈现的html中，div只是10px x 10px。

为什么会这样？我没有任何CSS覆盖div的大小。如何将div设置为我想要的宽度？

Answer 1

尝试：
d3.select("#search") .style("height", height) .style("width", width);

Answer 2

这是一篇旧帖子，但对于其他想要解决这个问题的人来说，以下内容将会起作用：

var width = 0.15 * window.innerWidth,
    height = 0.95 * window.innerHeight;

var searchcolumn = d3.select("#search")
                    .style("width", width + 'px')
                    .style("height", height + 'px');

我添加的是+ 'px';并将.attr更改为.style，因为它是您在此处使用的CSS。

工作代码：

var data = [10,12,6,8,15];

var svg = d3.select('body')
//.append('svg')
.attr('width', 500).attr('height', 500);

var width = 0.15 * window.innerWidth,
    height = 0.95 * window.innerHeight;
     
svg.selectAll('div')
  .data(data)
  .enter().append('div')
  .attr('class','divs')
  .attr('x', function(d,i) { d.clicked=false; return 100+100*i; })
  .attr('y', function(d,i) { return 0; })
  .style('width', width + 'px')
  .style('height',height +'px')
  .attr('background-color', function() { return 'red'; }) 

  .text(function(d){ return d;})

.divs { 
  background: blue;  
  display:inline-block;
  float:left;
  margin:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 3

如果您想设置多个样式属性而不是重复style(" ", " ") n次，则可以执行以下操作：

d3.select("#search").style({
  'height': height+'px',
  'width': width+'px'
});

希望有所帮助。