CODEWITHSUNDEEP
javascriptd3.js
maverick
maverick

Reputation: 139

D3: unable to access data within anonymous function

I am trying to create tooltips based on this tutorial http://chimera.labs.oreilly.com/books/1230000000345/ch10.html#_svg_element_tooltips Jump to: HTML div Tooltips

I have an issue though. I am unable to pass a data to anonymous function. Refer to ISSUE HERE COMMENT WITHIN THE CODE

<html>
<head>
    <title>Testing warehouse</title>
    <style>
    #tooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
    }

    #tooltip.hidden {
            display: none;
    }

    #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
    }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
//NOTE:: x and y co-ordinates needs to be set on excel file.
//      width and height of rect needs to be set within functions returnheight and returnwidth

var width = 1500,
    height = 1500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var data    
d3.csv("AisleA.csv", function(d) {
  data = d;

    function returnwidth(bay)
    {
        //if odd bay then LS else Carton Flow. 
        //This fucntion keeps getting updated as we include other aisles and bays
        if(Number(bay) & 1)
        {
            // ODD
            return 40
        }
        else
        {
            // EVEN
            return 60
        }
    }

    function returnheight(bay)
    {
        if(Number(bay) & 1)
        {
            // ODD
            return 40
        }
        else
        {
            // EVEN
            return 60
        }
    }

    for(i = 0; i < data.length; i++)
    {
        svg.append("rect")
          .attr("x", data[i].x) 
          .attr("y", data[i].y)
          .attr("width", returnwidth(data[i].Bay))
          .attr("height", returnheight(data[i].Bay))
          .style("fill","green")    
          .style("stroke","black")
          .on("mouseover", function(d) {
            //Get this bar's x/y values, then augment for the tooltip
            var xPosition = parseFloat(d3.select(this).attr("x"))/2 //+ xScale.rangeBand() / 2;
            var yPosition = parseFloat(d3.select(this).attr("y")) / 2 //+ h / 2;
            console.log(data[i]) // ISSUE HERE. VALUE SHOWN AS UNDEFINED
            //Update the tooltip position and value
            d3.select("#tooltip")
              .style("left", xPosition + "px")
              .style("top", yPosition + "px")
              .select("#value")
              .text(data[i].PickRate); //ISSUE HERE

            //Show the tooltip
            d3.select("#tooltip").classed("hidden", false);

            })
           .on("mouseout", function() {
            //Hide the tooltip
            d3.select("#tooltip").classed("hidden", true);
            });                                                 
    }
});

</script>
<div id="tooltip" class="hidden">
        <p><strong>Important Label Heading</strong></p>
        <p><span id="value">100</span>%</p>
</div>
</body>
</html>

The data that i need to display within the tool tip is in data[i]. Can some one please suggest me how i can access this data and display

CSV:

Aisle,Bay,PickRate,ReplenRate,x,y
A,1,medium,low,20,60
A,2,medium,high,20,120
A,3,low,low,80,60
A,4,high,low,100,120
A,5,medium,danger,140,60
A,6,danger,low,180,120

Working code - Tool tip adjustment

<html>
<head>
    <title>Testing warehouse</title>
    <style>
    #tooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
    }

    #tooltip.hidden {
            display: none;
    }

    #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
    }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
//NOTE:: x and y co-ordinates needs to be set on excel file.
//      width and height of rect needs to be set within functions returnheight and returnwidth

var width = 1500,
    height = 1500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var data    
d3.csv("AisleA.csv", function(d) {
    data = d;
    svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", function(d){return d.x}) 
      .attr("y", function(d){return d.y})

        //IF ODD BAY THEN LS ELSE CARTON FLOW. 
        //THIS BELOW FUCNTION KEEPS GETTING UPDATED AS WE INCLUDE OTHER AISLES AND BAYS
      .attr("width", function(d){
            if(Number(d.Bay) & 1)
            {
                // ODD
                return 40
            }
            else
            {
                // EVEN
                return 60
            }
      })
      .attr("height", function(d){
            if(Number(d.Bay) & 1)
            {
                // ODD
                return 40
            }
            else
            {
                // EVEN
                return 60
            }
      })
      .style("fill","green")    //SHOULD CHANGE BASED ON THE PICK RATE VALUE
      .style("stroke","black")
      .on("mouseover", function(data) {
        //Get this bar's x/y values, then augment for the tooltip
        var xPosition = parseFloat(d3.select(this).attr("x"))/2 //+ xScale.rangeBand() / 2;
        var yPosition = parseFloat(d3.select(this).attr("y")) / 2 //+ h / 2;

        //UPDATE THE TOOLTIP POSITION AND VALUE
        d3.select("#tooltip")
          .style("left", xPosition + "px")
          .style("top", yPosition + "px")
          .select("#value")
          .text(data.PickRate);

        //Show the tooltip
        d3.select("#tooltip").classed("hidden", false);

        })
       .on("mouseout", function() {
        //Hide the tooltip
        d3.select("#tooltip").classed("hidden", true);
        });                                                 
});

</script>
<div id="tooltip" class="hidden">
        <p><strong>Important Label Heading</strong></p>
        <p><span id="value">100</span></p>
</div>
</body>
</html>

Upvotes: 0

Views: 101

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You can place the tooltip as per your calculation as shown below:

  var xPosition = parseFloat(d3.select(this).attr("x"));
  var yPosition = parseFloat(d3.select(this).attr("y")) - 55;

Working code here:

Upvotes: 1

Related Questions