Странное поведение d3.transition
Я разрабатываю личное веб-приложение с реакцией и d3js.
Основная концепция заключается в том, что я получаю кучу данных через веб-сокет каждые 5 секунд и использую эти данные для рисования круга на холсте в реальном времени. Данные, которые я получаю, представляют собой массив объектов, который выглядит так:
data = [{ name: 'alice', x: 10, y: 20, }...]
А вот как я рисую круги:
_renderCircles = () => {
const t = d3.transition().duration(500);
const radius = 3;
const group = d3.select(this.refs.container)
.selectAll('g.ring')
.data(data);
const circleGroup = group.enter().append('g')
.attr('class', 'cart')
.attr('transform', d => {
return `translate(${d.x}, ${d.y})`;
});
circleGroup.append('circle');
circleGroup.append('text')
.attr('text-anchor', 'middle')
.attr('fill', 'white');
group.select('circle')
.attr('r', radius)
.style('fill', 'yellow');
group.select('text')
.text(d => { return d.name; });
group.transition(t)
.attr('transform', d => {
return `translate(${d.x}, ${d.y})`;
};
group.exit().remove();
}
Странное поведение - время от времени некоторые круги как бы "меняют" свое местоположение. Это происходит не постоянно, но все же достаточно часто, чтобы вызвать у меня беспокойство.
пример
Чтобы быть более конкретным, предположим, что мои данные не меняются (поэтому они получают те же данные), но во время перехода, я вижу, что круг B движется к A, в то время как круг A движется к B. Когда переход завершится, текст круга B становится ' A», а текст круга A становится «B», поэтому, если мы посмотрим на результат, ничего не изменится. Но я все еще вижу круги, движущиеся во время перехода.
Надеюсь, я объяснил свой вопрос достаточно ясно, и я могу загрузить видео, если это необходимо. Это действительно странно для меня, любая мысль будет так приветствоваться. Заранее спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Наиболее вероятное объяснение здесь состоит в том, что вы думаете, что данные точно такие же, но порядок объектов в данных отличается. Это, вместе с отсутствием ключевой функции, и составляет всю разницу.
В D3, если вы не зададите ключевую функцию, данные будут привязаны в соответствии с индексами. API объясняет:
If a key function is not specified, then the first datum in data is assigned to the first selected element, the second datum to the second selected element, and so on.
Мы можем увидеть это в этой простой демонстрации, основанной на вашем коде. Здесь данные почти те же, но объекты A и B поменяны местами в массиве newData:
const data = [{
name: "A",
x: 20,
y: 20
}, {
name: "B",
x: 20,
y: 120
}, {
name: "C",
x: 100,
y: 40
}, {
name: "D",
x: 260,
y: 20
}, {
name: "E",
x: 210,
y: 130
}];
const newData = [{
name: "B",
x: 20,
y: 120
}, {
name: "A",
x: 20,
y: 20
}, {
name: "C",
x: 100,
y: 40
}, {
name: "D",
x: 260,
y: 20
}, {
name: "E",
x: 210,
y: 130
}];
const svg = d3.select("svg");
renderCircles(data);
d3.timeout(function() {
renderCircles(newData);
}, 1000)
function renderCircles(data) {
const t = d3.transition().duration(1000);
const radius = 12;
const group = svg.selectAll('g')
.data(data);
const circleGroup = group.enter().append('g')
.attr('class', 'cart')
.attr('transform', d => {
return `translate(${d.x}, ${d.y})`;
});
circleGroup.append('circle')
.attr('r', radius)
.style('fill', 'tan');
circleGroup.append('text')
.attr('text-anchor', 'middle')
.attr("dy", 4)
.text(d => {
return d.name;
});
group.select('text')
.text(d => {
return d.name;
});
group.transition(t)
.attr('transform', d => {
return `translate(${d.x}, ${d.y})`;
});
group.exit().remove();
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>Поэтому решение использует ключевую функцию. Например:
.data(data, d => d.name);
Теперь взгляните на тот же код, с той лишь разницей... ничего не произойдет, когда мы вызовем функцию с новыми данными:
const data = [{
name: "A",
x: 20,
y: 20
}, {
name: "B",
x: 20,
y: 120
}, {
name: "C",
x: 100,
y: 40
}, {
name: "D",
x: 260,
y: 20
}, {
name: "E",
x: 210,
y: 130
}];
const newData = [{
name: "B",
x: 20,
y: 120
}, {
name: "A",
x: 20,
y: 20
}, {
name: "C",
x: 100,
y: 40
}, {
name: "D",
x: 260,
y: 20
}, {
name: "E",
x: 210,
y: 130
}];
const svg = d3.select("svg");
renderCircles(data);
d3.timeout(function() {
renderCircles(newData);
}, 1000)
function renderCircles(data) {
const t = d3.transition().duration(1000);
const radius = 12;
const group = svg.selectAll('g')
.data(data, d => d.name);
const circleGroup = group.enter().append('g')
.attr('class', 'cart')
.attr('transform', d => {
return `translate(${d.x}, ${d.y})`;
});
circleGroup.append('circle')
.attr('r', radius)
.style('fill', 'tan');
circleGroup.append('text')
.attr('text-anchor', 'middle')
.attr("dy", 4)
.text(d => {
return d.name;
});
group.select('text')
.text(d => {
return d.name;
});
group.transition(t)
.attr('transform', d => {
return `translate(${d.x}, ${d.y})`;
});
group.exit().remove();
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
Спасатель жизни!! Большое спасибо, да, это из-за разницы в порядке данных. :палец вверх