I used the code showed by this video (see from 24:34 time)
https://www.youtube.com/watch?v=aHJCt2adSWA
to make an interactive bar chart with D3.js Version 7
the video was made in 2020 and used version 5
the strange issue I am facing is that I am getting , when calling console.log(data) in the code below, the event object:
Event {isTrusted: true, type: ‘change’, target: input, currentTarget:
input, eventPhase: 2, …}isTrusted: truebubbles: truecancelBubble:
falsecancelable: falsecomposed: falsecurrentTarget:
nulldefaultPrevented: falseeventPhase: 0path: (9) [input, li, ul,
div#data, div#app, body, html, document, Window]returnValue:
truesrcElement: inputtarget: inputtimeStamp: 239761.39999997616type:
“change”[[Prototype]]: Event D3JSCHART-interactive1.html:131
instead of the data Array (as the presenter is getting in his video)
const listItems=d3
.select('#data')
.select('ul')
.selectAll('li')
.data(MyData)
.enter()
.append('li');
listItems.append('span').text(data => data.region);
listItems.append('input').attr('type','checkbox').attr('checked',true)
.on('change',(data) => {
console.log(data);
});
below the full code
<html lang="fr">
<head>
<style>
#app{
display:flex;
margin:2rem 1rem;
}
#data ul
{
list-style:none;
margin:0;
padding:0
}
#data li
{
margin-bottom:1rem;
padding:1rem;
box-shadow:0 2px 8px rgba(0, 0, 0, 0.6);
width:10rem;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:bold;
}
.label
{
background-color:green;
fill:#ff0077;
font-size:9px;
}
.bar {
fill:#ff0077;}
</style>
<title>D3.JS CHART Interactive 06/03/2022</title>
<!-- https://www.youtube.com/watch?v=aHJCt2adSWA-->
<script src="https://d3js.org/d3.v7.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale@4" ></script>
<script src="https://cdn.jsdelivr.net/npm/d3-axis@3"></script>
</head>
<body>
<div id="app">
<div id="chart"><svg></svg></div>
<div id="data"><ul></ul></div>
</div>
<script>
const MyData=
[
{id:'d1',value:15, region:'Tunisia'},
{id:'d2',value:13, region:'Algeria'},
{id:'d3',value:17, region:'Egypt'},
{id:'d4',value:28, region:'Lybia'},
{id:'d5',value:19, region:'Sudan'}];
const MARGINS={top:20, bottom:15};
const CHART_Width=600;
const CHART_HEIGHT=400 -MARGINS.top-MARGINS.bottom;
let selectedData=MyData;
const x=d3
.scaleBand().rangeRound([0, CHART_Width]).padding(0.1);
const y=d3
.scaleLinear().range([CHART_HEIGHT, 0]);
const ChartContainer=d3.
select('svg')
.attr('width',CHART_Width)
.attr('height',CHART_HEIGHT +MARGINS.top+MARGINS.bottom);
x.domain(MyData.map(d => d.region));
y.domain([0, d3.max(MyData,d => d.value)+3]);
let unselectedIds=[];
const chart=ChartContainer.append('g');
chart
.append('g')
.call(d3.axisBottom(x).tickSizeOuter(0))
.attr('transform',`translate(0,${CHART_HEIGHT})`)
.attr('color','#4f009e');
function renderChart()
{
chart
.selectAll('.bar')
.data(selectedData, data => data.id)
.enter()
.append('rect')
.classed('bar',true)
.attr('width',x.bandwidth())
.attr('height',data => CHART_HEIGHT -y(data.value))
.attr('x',(data) => x(data.region))
.attr('y',(data) => y(data.value));
chart.selectAll('.bar').data(selectedData).exit().remove();
chart
.selectAll('.label')
.data(selectedData, data => data.id)
.enter()
.append('text')
.text((data) => data.value)
.attr('x',data => x(data.region)+x.bandwidth()/2)
.attr('y',data => y(data.value)-7)
.attr('text-anchor','middle')
.classed('label',true);
chart.selectAll('.label').data(selectedData).exit().remove();
}
renderChart();
const listItems=d3
.select('#data')
.select('ul')
.selectAll('li')
.data(MyData)
.enter()
.append('li');
listItems.append('span').text(data => data.region);
listItems.append('input').attr('type','checkbox').attr('checked',true)
.on('change',(data) => {
console.log(data);
/*if(unselectedIds.indexOf(data.id) === -1)
{unselectedIds.push(data.id);}
else
{unselectedIds=unselectedIds.filter(id => id !== data.id);}
SelectedData=MyData.filter(
(d) => unselectedIds.indexOf(d.id) === -1
);
renderChart();
*/
});
</script>
</body>
</html>