Есть только две вещи, которые нужно исправить, чтобы заставить его работать как положено:
Как я уже упоминал в моем ответе на ваш первый вопрос в этом разделе ключевая функция выполняется дважды при сопоставлении данных с элементами DOM. Чтобы привязать данные к существующим элементам DOM, вы должны использовать технику, изложенную в Присоединить существующие элементы DOM к данным с помощью d3.js . В вашем случае ключевая функция становится
.data(data, function(d) {
return (d && d.train) || this.id;
})
Первое выражение d && d.train проверяет, относится ли d к фактическому значению, и, если оно истинно, оценивает его свойство .train. Это тот случай, когда ключевая функция выполняется для каждого элемента в аргументе data. Второе выражение this.id оценивается условно, если d равно undefined, что имеет место, когда ключевая функция выполняется для выбранных, т.е. уже существующих, элементов. Если совпадение найдено, соответствующий элемент привязывается к элементу.
Вы заинтересованы только в обновлении элементов, которые уже существуют в DOM. По этой причине вам не нужно использовать ввод ввода вообще. Выбор обновления, который возвращается .data() будет достаточным. Вы можете просто отозвать вызов на .enter().
Посмотрите на следующий фрагмент, чтобы увидеть его в действии:
var data = [{
train: 1
}, {
train: 2
}, {
train: 3
}, {
train: 4
}]
var svg = d3.select('svg')
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.train + "</span>";
})
svg.call(tip);
let selectedElms = d3.selectAll('circle')
.data(data, function(d) {
return (d && d.train) || this.id;
})
selectedElms
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<svg height="400" width="500">
<circle data='1' cx="100" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="1" />
<circle data='2' cx="200" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="2" />
<circle data='3' cx="300" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="3" />
<circle data='4' cx="400" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="4" />
</svg>