I want to make it so that clicking an emoji on the outside of the graph will center it, and load its variants. graph is updated how I expect, but the visualization is not. It seems like the old nodes are not removed, and the physics break. Is there an obvious bug in how I’m updating the graph?
The ones that should be removed become still, and the ones that should be added are not.
The error on join is NotFoundError: The object can not be found here. which is tough to search for.
Pressing 
on the chart cell will get the graph where it should be.
(If anyone’s wondering what the graph should look like after an update: Resize the window after clicking an emoji until the graph changes.)
1 Like
Here was my issue. node selection pointed to the inner image elements, not the g elements as I expected.
Didn’t work:
node = node
.data(nodes, (d) => d.id)
.join((enter) => enter
.append("g")
.attr("title", function (d) {
return d.label;
})
.attr("data-id", function (d) {
return d.id;
})
.attr("data-collection", function (d) {
return d.collection;
})
.append("svg:image")
.attr("xlink:href", function (d) {
return d.src;
})
.attr("height", 64)
.attr("width", 64)
.attr("transform", "translate(-32, -32)")
.on("click", (e, d) => {
if (!emojiKitchen.hasOwnProperty(d.id)) return;
mutable graph = combosToGraph(d.id, emojiKitchen[d.id]);
})
);
Works:
node = node
.data(nodes, (d) => d.id)
.join((enter) => {
const group = enter.append("g");
group
.attr("title", function (d) {
return d.label;
})
.attr("data-id", function (d) {
return d.id;
})
.attr("data-collection", function (d) {
return d.collection;
})
.append("svg:image")
.attr("xlink:href", function (d) {
return d.src;
})
.attr("height", 64)
.attr("width", 64)
.attr("transform", "translate(-32, -32)")
.on("click", (e, d) => {
if (!emojiKitchen.hasOwnProperty(d.id)) return;
mutable graph = combosToGraph(d.id, emojiKitchen[d.id]);
});
return group;
});
