javascript - 如何在 d3.js 中正确放置文本标签？

Question

我已经为描述职业自行车比赛中兴奋剂的数据集绘制了散点图，而我的绘图点当前是定向的，我无法在点旁边正确地标记它们，标签仅出现在几个点上，任何关于我在哪里的提示在标记点时做错事会很有用

link to codepen

// get data from the server
$.getJSON(
  "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json",
  function(x) {
    var margin = { top: 40, right: 20, bottom: 30, left: 40 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

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

    var data = x;
    var rankings = [];
    var values = [];

    //populate rankings and values variable with data
    for (var i in data) {
      rankings.push(data[i]["Place"]);
      values.push(data[i]["Seconds"] - 2210);
    }

    //function to format label on x-axis
    var formatMinutes = function(d) {
      var hours = Math.floor(d / 3600),
          minutes = Math.floor((d - hours * 3600) / 60),
          seconds = d - minutes * 60;
      var output = seconds + "s";
      if (minutes) {
        output = minutes + "m " + output;
      }
      if (hours) {
        output = hours + "h " + output;
      }
      return output;
    };

    var x = d3
    .scaleLinear()
    .domain([d3.max(values), 0])
    .range([0, width - 300]);

    var xAxis = d3
    .axisBottom()
    .scale(x)
    .ticks(6)
    .tickFormat(formatMinutes);

    //define yscale
    var y = d3
    .scaleLinear()
    .range([height, 0])
    .domain([d3.max(rankings), 0]);

    var yaxis = d3.axisLeft().scale(y);

    //define chart div
    var chart = d3
    .select(".chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr(
      "transform",
      "translate(" + margin.left + 500 + "," + margin.top + 100 + ")"
    );

    //     draw x axis
    svg
      .append("g")
      .call(xAxis)
      .attr("transform", "translate(0," + height + ")");

    // draw yaxis
    svg
      .append("g")
      .attr("class", "y axis")
      .call(yaxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em");

    // draw dots on the graph
    svg
      .selectAll(".dot")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("fill", function(d) {
      if (d.Doping.length == 0) {
        return "black";
      } else {
        return "red";
      }
    })
      .attr("cx", function(d) {
      return x(d.Seconds - 2210);
    })
      .attr("cy", function(d) {
      return y(d.Place);
    });

    //add text labels to the dots
    svg
      .selectAll("text")
      .data(data)
      .enter()
      .append("text")
      .style("text-anchor", "left")
      .attr("x", function(d) {

      return x(d.Seconds - 2210);
    })
      .attr("y", function(d) {
      return y(d.Place);
    })
      .text(function(d) {
      return d.Name;
    })
      .attr("transform", "translate(15,+4)");
  }
);

Answer 1

您几乎已经完成了，但一些小的更改将有助于获得所需的结果。

1. 我认为您的意思是使用“y”而不是“yscale”(yscale 未定义)

2. 使用 <g> 总是更好并将点包裹在其中。这是其中的一个片段: svg.append("g").classed('dots', true);

3. 现在将所有点和文本附加到(组)，即

   svg.select('g.dots').selectAll(".dot").data(data).enter().....
   
   svg.select('g.dots').selectAll("text").data(data).enter()....
   

4. 就是这样。这是DEMO 。您现在可以根据要求将字体样式应用于文本。

希望这有帮助。 :)