How to remove the previous instance from ReactJS through D3? - reactjs

Question

I would like to draw new treemap every time the data (data is generated based on the user interaction such as button clicks) is changed. At the moment every time the data is changed a new treemap is created but it is drawn on top of the previous treemap - meaning I can see both treemaps on the screen. Somehow the previous instance is not removed.
I have looked at this and this, and applied remove() function to remove the previous instance via d3. However, it does not work. I may be incorrectly used the remove function in the life cycle.
d3.select("treemap").remove(); is used in the second useEffect method.
export function Treemap({ width, height, data }) {
const ref = useRef();
useEffect(() => {
const svg = d3
.select(ref.current)
.attr("id", "treemap")
.attr("width", width)
.attr("height", height);
}, []);
useEffect(() => {
//THIS IS WHERE I USE REMOVE FUNCTION;
d3.select("treemap").remove();
draw();
}, [data]);
const draw = () => {
const svg = d3.select(ref.current);
// Give the data to this cluster layout:
var root = d3.hierarchy(data).sum(function (d) {
return d.value;
});
// initialize treemap
d3
.treemap()
.size([width, height])
.paddingTop(28)
.paddingLeft(0)
.paddingRight(0)
.paddingBottom(7)
.paddingInner(3)(root);
const color = d3
.scaleOrdinal()
.domain(["Diary", "Sweetner", "Fruit"])
.range(["#8FD175", "#402D54", "#E67E22"]);
const opacity = d3.scaleLinear().domain([10, 30]).range([0.5, 1]);
// Select the nodes
var nodes = svg.selectAll("rect").data(root.leaves());
// draw rectangles
nodes
.enter()
.append("rect")
.attr("x", function (d) {
return d.x0;
})
.attr("y", function (d) {
return d.y0;
})
.attr("width", function (d) {
return d.x1 - d.x0;
})
.attr("height", function (d) {
return d.y1 - d.y0;
})
.style("stroke", "black")
.style("fill", function (d) {
return color(d.parent.data.name);
})
.style("opacity", function (d) {
return opacity(d.data.value);
});
nodes.exit().remove();
// select node titles
var nodeText = svg.selectAll("text").data(root.leaves());
// add the text
nodeText
.enter()
.append("text")
.attr("x", function (d) {
return d.x0 + 5;
}) // +10 to adjust position (more right)
.attr("y", function (d) {
return d.y0 + 20;
}) // +20 to adjust position (lower)
.text(function (d) {
return d.data.name;
})
.attr("font-size", "19px")
.attr("fill", "white");
// select node titles
var nodeVals = svg.selectAll("vals").data(root.leaves());
// add the values
nodeVals
.enter()
.append("text")
.attr("x", function (d) {
return d.x0 + 5;
}) // +10 to adjust position (more right)
.attr("y", function (d) {
return d.y0 + 35;
}) // +20 to adjust position (lower)
.text(function (d) {
return d.data.value;
})
.attr("font-size", "11px")
.attr("fill", "white");
// add the parent node titles
svg
.selectAll("titles")
.data(
root.descendants().filter(function (d) {
return d.depth == 1;
})
)
.enter()
.append("text")
.attr("x", function (d) {
return d.x0;
})
.attr("y", function (d) {
return d.y0 + 21;
})
.text(function (d) {
return d.data.name;
})
.attr("font-size", "19px")
.attr("fill", function (d) {
return color(d.data.name);
});
};
return (
<div className="chart">
<svg ref={ref}></svg>
</div>
);
}

Answer 1

Normally, with d3, you never remove the already drawn nodes. It's much cheaper (computationally) and easier to just repurpose them!
If you really want to remove all nodes, d3.select("treemap") doesn't do anything, because "treemap" is not a valid selector. Try #treemap instead.
Or, if you want to repurpose the already drawn bits, consider the following:
function Treemap({
width,
height
}) {
const ref = React.useRef();
const [data, setData] = React.useState(`
{
"name": "Fruit",
"children": [
{ "name": "Apples", "value": 1 },
{ "name": "Oranges", "value": 1 },
{ "name": "Bananas", "value": 1 }
]
}
`);
React.useEffect(() => {
const svg = d3
.select(ref.current)
.attr("id", "treemap")
.attr("width", width)
.attr("height", height);
}, []);
React.useEffect(() => {
draw();
}, [data]);
const draw = () => {
const svg = d3.select(ref.current);
let parsedData
try {
parsedData = JSON.parse(data);
} catch (e) {
console.log(e);
return;
}
// Give the data to this cluster layout:
var root = d3.hierarchy(parsedData).sum(function(d) {
return d.value;
});
// initialize treemap
d3
.treemap()
.size([width, height])
.paddingTop(28)
.paddingLeft(0)
.paddingRight(0)
.paddingBottom(7)
.paddingInner(3)(root);
const color = d3
.scaleOrdinal()
.domain(["Diary", "Sweetner", "Fruit"])
.range(["#8FD175", "#402D54", "#E67E22"]);
const opacity = d3.scaleLinear().domain([10, 30]).range([0.5, 1]);
// Select the nodes
var nodes = svg.selectAll("rect").data(root.leaves());
// draw rectangles
var newNodes = nodes
.enter()
.append("rect")
.style("stroke", "black");
nodes.merge(newNodes)
.attr("x", function(d) {
return d.x0;
})
.attr("y", function(d) {
return d.y0;
})
.attr("width", function(d) {
return d.x1 - d.x0;
})
.attr("height", function(d) {
return d.y1 - d.y0;
})
.style("fill", function(d) {
return color(d.parent.data.name);
})
.style("opacity", function(d) {
return opacity(d.data.value);
});
nodes.exit().remove();
// select node titles
var nodeVals = svg.selectAll(".val").data(root.leaves());
nodeVals.exit().remove();
// add the values
var newNodeVals = nodeVals
.enter()
.append("text")
.classed("val", true)
.attr("font-size", "11px")
.attr("fill", "white");
nodeVals.merge(newNodeVals)
.attr("x", function(d) {
return d.x0 + 5;
}) // +10 to adjust position (more right)
.attr("y", function(d) {
return d.y0 + 35;
}) // +20 to adjust position (lower)
.text(function(d) {
return d.data.value;
});
// add the parent node titles
var titles = svg
.selectAll(".title")
.data(
root.descendants().filter(function(d) {
return d.depth == 1;
})
);
titles.exit().remove();
var newTitles = titles
.enter()
.append("text")
.classed("title", true)
.attr("font-size", "19px");
titles.merge(newTitles)
.attr("x", function(d) {
return d.x0 + 5;
})
.attr("y", function(d) {
return d.y0 + 21;
})
.text(function(d) {
return d.data.name;
})
.attr("fill", function(d) {
return color(d.data.name);
});
};
return ( <
div className = "chart" >
<
textarea onChange = {
(el) => setData(el.target.value)
}
value = {
data
}
rows = "20"
cols = "50" / >
<
svg ref = {
ref
} > < /svg> <
/div>
);
}
ReactDOM.render( <
Treemap width = "600"
height = "300" / > ,
document.getElementById('root')
)
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
<div id="root"></div>
In any case, all your selectors were missing the .-class prefix. I'd recommend to read up on selectors, and on the enter(), exit(), merge() lifecycle.