Am new to d3, to use the join() method to update data on my Treemap projects which resulted in a weird behavior looks as if the chart are stacking on each other because the data actually updated but the old one didn't exit the Dom as it supposed to here's my code
<body>
<div class="container mb-4 mt-2 w-auto">
<div class="btn-group ms-4">
<button class="btn btn-dark border-secondary border-2" id="video">Video Game Sales</button>
<button class="btn btn-dark border-secondary border-2" id="movie" onclick="update(movies)">Movie Sales</button>
<button class="btn btn-dark border-secondary border-2" id = "kick" onclick="update(kickStarter)">Kickstarter Pledges</button>
</div>
</div>
<div id="head">
<svg></svg>
</div>
<div id="Tree"><svg></svg></div>
<div id="legend">
<svg><g></g></svg>
</div>
<script>
//Initialize
const width = 1000
const height = 700
const padding = 100
const tree = d3.select('#Tree')
const svg = tree.select("svg")
.attr("width",width)
.attr("height",height)
.style("background","#7472705c")
.style("margin-top",20)
Promise.all([
d3.json('videoGameSales.json'),
d3.json('Movies.json'),
d3.json('kickStarter.json')
]).then((data)=>{
console.log(data)
const videoGameSales = data[0]
const movies = data[1]
const kickStarter = data[2]
console.log(kickStarter)
update(videoGameSales)
d3.select("#video").on(
"click", ()=>{update(data[0])
}
)
d3.select("#movie").on(
"click", ()=>update(data[1])
)
d3.select("#kick").on(
"click", ()=>update(data[2])
)
function update(data){
var root = d3.hierarchy(data,d=>d.children).sum((d)=>d.value)
console.log(root)
console.log(root.leaves())
d3.treemap()
.size([width, height])
(root)
var color = d3.scaleOrdinal()
.range([...d3.schemeCategory10,...d3.schemeDark2])
var tooltip = tree.append("div")
.style("opacity",0)
.style("border","solid")
.style("border-width","2px")
.style("border-radius","5px")
.style("padding","10px")
.style("color","black")
.style("box-shadow","4px 4px 3px grey")
.style("width","150px")
const node = svg.selectAll("g")
.data(root.leaves())
// .enter()
.join("g")
.style("position","absolute")
.style("overflow","hidden")
.style("text-indent",2)
.on("mouseover",function(event, d){
tooltip
.style("opacity",0.8)
d3.select(this)
.style("opacity",0.8)
})
.on("mousemove",function(event,d){
tooltip
.html(`Name: ${d.data.name}<br>
Category: ${d.data.category} <br>
Value: ${d.data.value}`)
.style("left",(event.pageX+5)+'px')
.style("top",(event.pageY)+'px')
.style("position","absolute")
.style("font-weight","bold")
.style("background",color(d.data.category))
})
.on("mouseleave",function(d){
tooltip
.style("opacity",0)
d3.select(this)
.style("stroke","none")
.style("opacity",1)
})
node.append("rect")
.attr("x",d=>d.x0)
.attr("y",d=>d.y0)
.attr("height",d=>(d.y1-d.y0))
.attr("width",d=>(d.x1-d.x0))
.style("stroke","black")
.style("fill",d=>color(d.data.category))
node.append("text")
.selectAll("tspan")
.data(d=>{
return d.data.name.split(/(?=[A-Z\s][^A-Z])/g).map(v=>{
return {
text:v,
x0:d.x0,
y0:d.y0
}
})
})
.enter()
.append('tspan')
. attr("x",d=>d.x0+5)
.attr("y",(d,i)=>d.y0+10+(i*10))
.text((d)=>d.text)
.style("font-size",8)
.style("position","absolute")
.style("overflow","hidden")
}
})
</script>
<script src="https://d3js.org/d3.v7.js"></script>
</body>
I tried using the old exit().remove() which still didn't work out , please how can successfully update data on the project