Question: I am trying to select 4 divs using a d3 selectAll function, but nothing is getting selected. The height in this code never changes:

```css
var popop = d3.select("#chart")
    .selectAll(".bar");

popop.style("height", "40px");
```

```html
<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="utf-8">
    <script src="../lib/d3.v3.min.js"></script>
    <script src="project1.js"></script>
    <style>
        .bar {
            float: left;
            width: 30px;
            margin-right: 20px;
            border-color: #F4F5F7;
            border: 1px solid #C5C5C5;
        }
        #chart {
            width: 100%;
            height: 300px;
        }
    </style>

</head>

<body>

    <div id="chart">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>

</body>
</html>
```

The select('#chart') works when it is used by itself. When I look at the code in the Code Inspector it popop has one element. When I add .selectAll(".bar") only one element is given.

When I run this in the browser here on Stack Overflow I get the same as my local code. Just four small horizontal lines. Their height is 0 when you hover over them. 

When I run Aagam Jain's code on Stack Overflow it works!!! When I copy Aagam's code locally, it doesn't work. The includes downloading d3.v3 from the website.

Tried in Firefox and Chrome and get the same.

Answer: 
You are trying to spread array into an object and adding additional keys for which the output that is coming is correct. If you want the desired output you will have to make the keys same before using spread operator that is if you want override keys of the object at the 0th position you will have to merge to it to an array of the object whose element at 0th position overrides your keys.

```
const o1 = [
  { a: "original a", b: "original b" },
  { c: "original c", d: "original d" }
];

const updatedObj = [
  {
    a: "updated a",
    b: "updated b"
  }
];
const mergeObj = { ...o1, ...updatedObj };
const o2 = Object.values(mergeObj);
console.log(o2);

```
Maybe you should use [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

`Object.assign` is used to replace some proprieties of an object:

```
// example object
let obj = { a: "original", b: "original" };

// use object.assign to create a new updated object 
// maybe you want to update `a` property
let updated_obj = Object.assign({}, obj, { a: "new value });

console.log(updated_obj); //{ a: "new value", b: "original" }

```