I am learning the D3 library. And I met two questions:
- why the arrow points to a different area, not this circle? 2. How to remove annotation when mouse out?
We can see the arrow points to another area, not the red circle. And I am struggling with how to remove annotation after the mouse is out.
Needs help. ;>
function stringToNumber(data){ //convert "string" to "number"
data.Year = +data.Year;
data.Inflation = +data.Inflation;
data.IntentionalHomicides = +data.IntentionalHomicides;
data.LifeExpectancy= +data.LifeExpectancy;
data.Population = +data.Population;
data.SuicideMortality = +data.SuicideMortality;
data.Unemployment = +data.Unemployment;
data.HDI = +data.HDI;
}<html>
<script src="123123.js"></script>
<script src = "https://unpkg.com/topojson@3.0.2/dist/topojson.js"></script>
<body>
<script src = "https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>
<script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
<div>
<svg id="SVG"></svg>
</div>
</form>
</body>
<script>
var e = document.getElementById("ddlViewBy");
function show(){
var as = document.forms[0].ddlViewBy.value;
var strUser = e.options[e.selectedIndex].value;
a = parseInt(as);
console.log(typeof(a));
return a;
}
e=show();
console.log(e);
const height = screen.height;
const width = screen.width;
const csvData = d3.csv("https://raw.githubusercontent.com/ZiZi1noob/UIUC416-DataVis-FinalProject/main/fixedData11.csv");
var sortedObjectArray = [];
var getYear = 1998;
csvData.then(function(data){
data.forEach(function(data){ // calls a function once for each element in an array, in order
stringToNumber(data);
if (data["Year"] == getYear){
sortedObjectArray.push(data);} //filter by country and leave the targeted data with specific country
});
console.log(sortedObjectArray);
bubbleChart(sortedObjectArray);
});
function bubbleChart(data){
//scaleLog()
let xScale = d3.scaleLinear()
.domain([40,100])
.range([0,width*0.5]);
let yScale = d3.scaleLinear()
//reverse range instead of domain
.domain([5000000,130000000])
.range([height*0.5,0]);
svg =d3.select("svg")
.attr("height", height*0.8)
.attr("width",width*0.8)
.append("g")
.attr("transform", "translate(100,0)")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("fill", "lightblue")
.attr("cy", function(data,i){return xScale(data.LifeExpectancy)})
.attr("cx", function(data,i){return yScale(data.Population)})
.attr("r", function(data){return data.HDI*10});
let yAxis =d3.axisLeft(yScale)
.tickFormat(d3.format("~s"));
let xAxis = d3.axisBottom(xScale)
.tickFormat(d3.format("~s"));
d3.select("svg").append("g")
.attr("transform", "translate(100,100)")
.call(yAxis);
d3.select("svg")
.append("g")
.attr("transform", "translate(100,640)")
.call(xAxis);
d3.selectAll("circle") //add anotation
.on("mouseover", function(data){
console.log("cx",this.getAttribute("cx"));
console.log("cy",this.getAttribute("cy"));
let dotCX = this.getAttribute("cx");
let dotCY = this.getAttribute("cy");
let dotPop = data.Population;
let dotLifeEp = data.LifeExpectancy;
let dotHDI =data.HDI;
let dotCty = data.Country;
//let annotations =AnotationBubble(dotCX,dotCY,dotPop,dotLifeEp,dotHDI);
let makeAnnotations = d3.annotation()
//.annotations(annotations);
.annotations(AnotationBubble(dotCX,dotCY,dotPop,dotLifeEp,dotHDI,dotCty));
d3.select("#SVG")
.append("g")
.style("font-size", 25)
.style("font-weight", "bold")
.call(makeAnnotations);
d3.select(this)
.transition()
.attr("fill","red")
.delay(function(d,i){return 100*i;})
.duration(1000)
.attr("r", function(d){return d.HDI*35});
})
.on("mouseout", function(data)
{ console.log("out works");
d3.select(this)
.transition()
.delay(function(d,i){return 100*i;})
.duration(1000)
.attr("r", function(d){return d.HDI});
//d3.select(this).remove();
}
);
}
function AnotationBubble(dotCX,dotCY,dotPop,dotLifeEp,dotHDI,dotCty){ // Add annotation to the chart
const annotations = [
{
note: {
title: (dotLifeEp,dotPop,dotHDI),
label: dotCty,
},
connector: {
end: "arrow", // none, or arrow or dot
type: "line", // Line or curve
endScale: 2,
lineType : "horizontal",
},
color: ["red"],
x: dotCX,
y: dotCY,
dy: 50,
dx: 50,
type: d3.annotationCalloutElbow,
//subject: { radius: 20, radiusPadding: 10 },
}]
return annotations;
}
</script>
</html>
Comments
Post a Comment