D3 JS图表在为X和Y轴添加标签后被切断答案

【问题标题】：D3 JS chart is cut off after adding labels for X and Y axisD3 JS图表在为X和Y轴添加标签后被切断
【发布时间】：2017-01-24 06:52:06
【问题描述】：

我正在使用下面的代码在 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]);

【问题讨论】：

标签： javascript css json d3.js

【解决方案1】：

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

当你这样做时：

var labels = svg.selectAll("text")

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

解决方法很简单：选择不存在的东西：

var labels = svg.selectAll("foo")

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

这是你更新的小提琴：https://jsfiddle.net/mp7LxsL4/

【讨论】：