javascript - D3 JS图表在添加X和Y轴标签后被切断

Question

我正在使用下面的代码在 D3 中制作散点图，并且在将文本标签放在 X 和 Y 轴上后，右侧圆圈的文本标签将被切断。

这是一个工作的 jsFiddle:

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

添加 X 和 Y 轴标签似乎会将整个图表向右和向上移动，使其稍微移出包含的 div。谁能帮我解决这个问题吗？

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]);

Answer 1

这与“移动图表”无关。问题就在这里。

当你这样做时:

var labels = svg.selectAll("text")

您正在选择 SVG 中已存在的文本元素。因此，与应包含的内容相比，您的“输入”选择将包含更少的元素。

解决方案很简单:选择不存在的内容:

var labels = svg.selectAll("foo")

或者，将附加轴标签的 block 移动到代码底部。

这是您更新的 fiddle :https://jsfiddle.net/mp7LxsL4/