# Nodes appearing from corner, not center of map, when using d3.force
**URL:** https://talk.observablehq.com/t/nodes-appearing-from-corner-not-center-of-map-when-using-d3-force/4997
**Category:** Help
**Created:** [April 29, 2021, 9:40pm UTC](https://talk.observablehq.com/t/nodes-appearing-from-corner-not-center-of-map-when-using-d3-force/4997 "2021-04-29T21:40:13Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)
#### Post date: [April 29, 2021, 9:40pm UTC](https://talk.observablehq.com/t/nodes-appearing-from-corner-not-center-of-map-when-using-d3-force/4997/1 "2021-04-29T21:40:13Z")
Hi, I have a map of locations positioned using d3.force, that updates using a data scrubber. The initial and all new nodes transition from the upper corner [0,0] as they are projected to their correct locations. I’d like them to appear from the center instead, as they do [here](https://observablehq.com/@d3/modifying-a-force-directed-graph).
Note, nodes also move from one cluster to another, which seems to be working.
Any idea how to do this?
My notebook [Updating positions , using d3-force / Mathew Brown / Observable](https://observablehq.com/d/e352c4e8bb647859)
Thanks
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [April 29, 2021, 10:06pm UTC](https://talk.observablehq.com/t/nodes-appearing-from-corner-not-center-of-map-when-using-d3-force/4997/2 "2021-04-29T22:06:29Z")
You need to initialize your node positions to the map center, e.g. (note the added object at the end):
```javascript
nodes = nodes.map(d => Object.assign(old.get(d.IMO_number) || {}, d, {x: width/2, y: height/2}));
```
---
### Author:  [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)
#### Post date: [April 30, 2021, 3:20am UTC](https://talk.observablehq.com/t/nodes-appearing-from-corner-not-center-of-map-when-using-d3-force/4997/3 "2021-04-30T03:20:07Z")
Hmm, that makes sense but with my implementation, all the nodes then start from the center with every update, but I just want the new nodes to start from there, while the rest should remain where they are.
… which is odd, because from your implemetation it looks like only new nodes get assigned an initial x,y of width/2,hight/2. So I’m not sure why they existing nodes are also starting from there…
---
### Author:  [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)
#### Post date: [April 30, 2021, 4:33am UTC](https://talk.observablehq.com/t/nodes-appearing-from-corner-not-center-of-map-when-using-d3-force/4997/4 "2021-04-30T04:33:26Z")
I also note that this implementation does specify an initial position. Indeed, this is what I’d like to replicate, new nodes ‘appear’ close to where they will end up.
> **[Modifying a Force-Directed Graph](https://observablehq.com/@d3/modifying-a-force-directed-graph)**
>
> This notebook demonstrates how to update a live force-directed graph. We use selection.join with a key function to add and remove elements as the graph changes; and we update the simulation’s nodes and links before restarting.
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [April 30, 2021, 12:32pm UTC](https://talk.observablehq.com/t/nodes-appearing-from-corner-not-center-of-map-when-using-d3-force/4997/5 "2021-04-30T12:32:49Z")
Object.assign applies properties from right to left. In order to retain previously set x/y properties, they need to be listed before `d`.
And instead of half width/height, you initialize with the centroid:
```javascript
const center = d => {
const [x, y] = projection(d.feature.centroid);
return {x, y};
};
nodes = nodes.map(d => Object.assign(old.get(d.IMO_number) || center(d), d));
```
I would also suggest that you calculate/project the centers only once and then cache them.
---
### Author:  [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)
#### Post date: [April 30, 2021, 2:56pm UTC](https://talk.observablehq.com/t/nodes-appearing-from-corner-not-center-of-map-when-using-d3-force/4997/6 "2021-04-30T14:56:11Z")
Thank you so much! I had output the results of nodes after Object.assign and it seemed like they were preserving their original values… but I guess not.
I’ve not used Object.assign much, but now that I see how handy it is, will definitely make use of it more. Thanks again.