0

I Had Created A Scatter Plot Which Takes Json Data From https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json Every Thing Is Working Fine But Label Is Not Generating For All Values
enter image description here

My Code Looks Like

var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json";
//Call CSV Data
d3.json(url, function (error, data) {
    if (error) console.log("You Got Error Some Where !!!");
    /*
     Check For Data
        console.log(data);
        console.log(data[0].Name);
    */
    var fastestTime = 2210;
    data.forEach(function (finish) {
        //turn finishing time into seconds behind winner
        finish.behind = finish.Seconds - fastestTime;
    });
    //Create Margin
    var margin = { top: 40, right: 20, bottom: 60, left: 60 },
        width = 960 - margin.left - margin.right,
        height = 600 - margin.top - margin.bottom;
    /*
  define scale then followed by axis
  */
    // define x and y scales
    // define x and y scales
    // Formatters for counts and times (converting numbers to Dates).
    var formatCount = d3.format(",.0f"),
        formatTime = d3.time.format("%H:%M"),
        formatMinutes = function (d) { return formatTime(new Date(2012, 0, 1, 0, d)); };
    var xScale = d3.scale.linear().
        domain([d3.max(data, function (d) { return d.behind+50; }), 0 ]).
        range([0, width]);
    var yScale = d3.scale.linear().
        domain([0, d3.max(data, function (d) { return d.Place + 1; })]).
        range([0, height]);
    // define x axis and y axis
    var xAxis = d3.svg.axis().
        scale(xScale).
        orient("bottom").
        tickFormat(formatMinutes);
    var yAxis = d3.svg.axis().
        scale(yScale).
        ticks(8).
        orient("left");
    /*
   Create Tooltip
   */
    var toolTip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function (d) {
          var tooltipHTML = "<span class = 'name'>" + d.Name + "</span><br/>" + d.Year + "<br/>" + d.Nationality;
          if (d.doping !== "") {
              tooltipHTML += "<br/>" + d.Doping;
          } else {
              tooltipHTML += "<br/>No doping allegations";
          }
          return tooltipHTML;
      });
    /*
   create svg element then append height and width and g which act as a container
   */
    var svg = d3.select("body").
      append("svg").
      attr({
          "width": width + margin.right + margin.left,
          "height": height + margin.top + margin.bottom
      }).
    append("g").
      attr("transform", "translate(" + margin.left + "," + margin.right + ")");

    //call toolTip
    svg.call(toolTip);
    // Draw xAxis
    svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis).append("text")
     .attr("x", 300)
     .attr("y", 35)
     .attr("dy", ".35em")
     .style("text-anchor", "middle")
     .text("Minutes Behind Fastest Time");;
    //Draw yAxis
    svg.append("g")
     .attr("class", "y axis")
     .call(yAxis)
     .append("text")
     .attr("transform", "rotate(-90)")
     .attr("x", 0)
     .attr("y", -35)
     .attr("dy", ".35em")
     .style("text-anchor", "end")
     .text("Ranking");

    /*
    create bar or bind data
   */
    //bind data
    svg.selectAll("circle")
      .data(data)
   //enter data
    .enter().
        append("circle")
   //update data
      .attr("class", "circle")
      .attr("cx", function (d) { return xScale(d.behind); })
      .attr("cy", function (d) { return yScale(d.Place); })
      .attr("r", 8)
      .attr("fill", function (d) {
          if (d.Doping == "") {
              return "green";
          }
          return "red";
      })
      .on('mouseover', toolTip.show)
      .on('mouseout', toolTip.hide);
    // Creating labels
    svg.selectAll("text")
                 .data(data)
                 .enter()
                 .append("text")
                 .text(function (d) {
                     return d.Name;
                 })
                 .attr("x", function (d) {
                     return xScale(d.behind - 5);
                 })
                 .attr("y", function (d) {
                     return yScale(d.Place - (-0.3));
                 })
                 .attr("font-family", "sans-serif")
                 .attr("font-size", "11px")
                 .attr("fill", "black");
});
svg {
  margin-top:50px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color:antiquewhite;
}
body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.bar {
  fill: orange;
}

.bar:hover {
  fill: orangered ;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
/*Do Not Change*/
<!DOCTYPE html>
<html>
<head>
    <title>ScatterPlot</title>
    <meta charset="utf-8" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/d3/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
    <link href="demo.css" rel="stylesheet" />
</head>
<body>
   
    <script src="../Scripts/jquery-2.2.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="demo.js"></script>
</body>
</html>

My Fiddle Link

1 Answer 1

2

Do not use:

svg.selectAll("text")

There's other text nodes in your SVG (on the axis, for instance) and you are selecting things you don't really want. Instead, use a class:

svg.selectAll(".label")
  .data(data)
  .enter()
  .append("text")
  .attr("class", "label")
  ...

Updated fiddle.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.