CODEWITHSUNDEEP
javascriptcssjsond3.js
chemook78
chemook78

Reputation: 1198

D3 JS chart is cut off after adding labels for X and Y axis

I am making a scatterplot in D3 with the code below and the textlabels of the right circles are being cut off, after putting textlabels on the X and Y axis.

Here is a working jsFiddle:

https://jsfiddle.net/chemok78/1vcat0s8/4/

Adding the X and Y axis labels seems to move the whole chart to the right and up, making it move a bit out of the containing div. Anyone can help me how to fix this?

var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json";
d3.json(url, function(json) {

  var data = json;

  var margin = {
    top: 40,
    right: 100,
    bottom: 80,
    left: 80
  };
  var w = 1000 - margin.left - margin.right;
  var h = 800 - margin.top - margin.bottom;

  var svg = d3.select("#chart")
    .append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var maxRank = d3.max(data, function(d) {

    return d.Place;

  });

  var minSeconds = d3.min(data, function(d) {

    return d.Seconds;

  });

  var maxSeconds = d3.max(data, function(d) {

    return d.Seconds;

  });


  var formatTime = d3.time.format("%M:%S");
  var formatSeconds = formatMinutes = function(d) {
    return formatTime(new Date(2016, 0, 0, 0, 1, d));
  };

  var xScale = d3.scale.linear()
    .domain([maxSeconds + 5, minSeconds])
    .range([0, w]);

  var yScale = d3.scale.linear()
    .domain([0, maxRank + 2])
    .range([0, h]);

Upvotes: 2

Views: 1513

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

This has nothing to do with "moving the chart". Here is the problem.

When you do this:

var labels = svg.selectAll("text")

You're selecting text elements that already exist in your SVG. Because of that, your "enter" selection will have less elements compared to what it should contain.

The solution is simple: select something that doesn't exist:

var labels = svg.selectAll("foo")

Or, alternatively, move the blocks that append the axes' labels to the bottom of the code.

Here is your updated fiddle: https://jsfiddle.net/mp7LxsL4/

Upvotes: 2

Related Questions