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")

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

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

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

1 个答案: