D3 Relative Position Logic, Selections, and Translating - d3.js

Question

While relative position logic, selections and translating sound like separate issues at first glance, in my particular case, you will see how they are all interrelated.
Building off my dynamic button appending project, I now want to make a transition() effect where you can append things in any order, remove them in any order, and if something was removed from the top, the bottom elements will gracefully glide up to the top to fill the empty space. I have only got it semi functional, the issue is I can't find the right logic to select only the text that is below the current button event.
Skipping the logic, I did successfully use the transition as desired by simply using selectAll('text'). This only works if you have 2 items, once you append 3 things it gets messy, because it doesn't have the right logic to discern which to transition.
The other translating problem is pertaining to making the button move. The text transitions fine, but the button stubbornly stays put regardless of using .attr('top', new_value) or .attr('transform', 'translate(' + 0+','+new_value+')')
Go to the live example with comments and choose things from the drop down menu, click to remove the top one and you will see what I mean.
So to sum up:
How can I make the if () logic check for any text that is greater than the current top distance? (i.e. if there are text elements that are lower on the page than the current)
How can I tell D3 to select only the text that has a greater relative position (in the vertical sense, i.e. lower on the page)
How can I make D3 translate or update the button's top? Note in the example I'm using selectAll('button'), but ideally I'd need a more discerning selection.

Answer 1

You should use data binding to achieve this, see the render() function in my code.
var margins = {
top: 200,
right: 80,
bottom: 30,
left: 50
};
var width = 500;
var height = 200;
var itemHeight = 30;
var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;
var y = d3.scaleOrdinal();
var options = [
'Add Text',
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
'I',
];
d3.select('#choose')
.on('change', addText)
.selectAll('option')
.data(options)
.enter().append('option')
.attr('value', function(d) {
return d;
})
.text(function(d) {
return d;
});
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
svg.append('text')
.text('Mix and Match Text')
.attr('font-weight', 'bold')
.attr('x', 15)
.attr('y', 60)
.attr('font-size', '24px');
var count = 0;
var intCount = 0;
var textItems = [];
function addText() {
var chooseSel = document.getElementById('choose');
var choice = chooseSel.options[chooseSel.selectedIndex].value;
textItems.push(choice);
render();
}
function removeItem(item) {
textItems.splice(textItems.indexOf(item), 1);
render()
}
function render() {
y.range(textItems.map((item, i) => i * itemHeight + 10)).domain(textItems);
var items = graphGroup.selectAll('.item').data(textItems, d => d);
var enteringItems = items.enter()
.append('g')
.attr('class', 'item')
.attr('opacity', 0)
items.merge(enteringItems)
.transition()
.attr('opacity', 1)
.attr('transform', d => `translate(0, ${y(d)})`)
items.exit()
.transition()
.attr('opacity', 0)
.remove()
enteringItems
.append('text')
.text(d => d)
.style('text-align', 'center')
enteringItems
.append('text')
.attr('class', 'close-button')
.attr('transform', 'translate(20, 0)')
.text('x')
.on('click', d => removeItem(d))
}
text {
font-family: sans-serif, Play;
}
form .s1 {
position: absolute;
top: 180px;
left: 55px;
}
*:focus {
outline: none;
}
select {
background: #404040;
color: #ffffff;
}
select option:checked:after {
background: #ffffff;
color: #404040;
}
.item {
fill: black;
}
.close-button {
fill: darkgray;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
<form>
<select id='choose' class='s1'></select>
</form>