时间戳

首页 > 解决方案 > 如何删除注释以及为什么箭头指向不同的区域而不是这个圆圈？

javascript - 如何删除注释以及为什么箭头指向不同的区域而不是这个圆圈？

问题描述

我正在学习 D3 库。我遇到了两个问题：

  1. 为什么箭头指向不同的区域，而不是这个圆圈？2. 鼠标移出时如何删除注释？

我们可以看到箭头指向另一个区域，而不是红色圆圈。我正在努力解决鼠标退出后如何删除注释。

需要帮助。;>

在此处输入图像描述

    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>

标签： javascriptd3.jsannotations

解决方案

推荐阅读