I created a div in my html,

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

I want to set its width to 15% of my window width in my Javascript. I'm attempting to use D3 to do this:

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

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

I can see in the DOM, the width and height of my div has been changed:

However, in the rendered html the div is just 10px x 10px.

Why does this happen? I do not have any CSS that overwrites the size of the div. How do I set my div to my desired width?

I created a div in my html,

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

I want to set its width to 15% of my window width in my Javascript. I'm attempting to use D3 to do this:

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

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

I can see in the DOM, the width and height of my div has been changed:

However, in the rendered html the div is just 10px x 10px.

Why does this happen? I do not have any CSS that overwrites the size of the div. How do I set my div to my desired width?

• javascript
• html
• d3.js

• 2 Specify the unit, i.e. width + "px". – Lars Kotthoff Commented Nov 20, 2014 at 11:51

3 Answers 3

This is an old post but for anyone else wanting to solve this, the following will work :

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

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

I have added is + 'px'; and also changed .attr to .style as it's the CSS you are working with here.

Working code :

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./ajax/libs/d3/3.4.11/d3.min.js"></script>

Try:
d3.select("#search") .style("height", height) .style("width", width);

You can simply do the following when you want to set multiple style attributes instead of repeating style(" ", " ") n times:

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

Hope that helps.