javascript - D3文字不在节点上居中吗？

我有一个带散点图的jsfiddle，其对应的文本将不与点对齐。

我相信该块应该在与圆相同的坐标处显示名称：

.attr("x", function(d){return timeScale(d[1]);})
.attr("y", function(d){return rankScale(d[0]);})

这是我用来放置圆圈的相同代码。

我会误会吗？

最佳答案

由于您（出于某种原因）正在翻译圈子，因此您应将相同的译文应用于文本：

textSelection.attr("transform", "translate("+transRight+","+transDown+")")

另外，也不要翻译圈子。

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

这是具有相同代码的堆栈片段：

function call() {

  $.ajax({
    url: "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json",
    data: {
      format: 'json'
    },

    complete: function(xhr, textStatus) {
      //console.log(xhr.status);
      //console.log(textStatus);
    },
    error: function() {
      $('#container').html('<p>An error has occurred</p>');
    },

    success: (data) => {

      pushArray(data);

    },
    type: 'GET'
  });


}

call();

var timeArray = [];

function pushArray(data) {

  data = JSON.parse(data);


  for (var i = 0; i < data.length; i++) {
    var tempArray = [];
    tempArray.push(i);

    var hms = data[i].Time;
    var a = hms.split(':');
    var seconds = ((+a[0]) * 60 + (+a[1]));


    tempArray.push(seconds);

    timeArray.push(tempArray);
  }

  var w = $(window).width();
  var h = $(window).height();

  var margin = {
    top: h / 5,
    left: w / 10
  };

  h = h * .8;
  w = w * .9;

  var svgW = w * .8;
  var svgH = h * .8;

  w = w * .6;
  h = h * .6;


  var rankScale = d3.scaleLinear()
    .domain([1, 35])
    .range([0, h]);

  var axisRankScale = d3.scaleLinear()
    .domain([35, 1])
    .range([h, 0]);

  var timeScale = d3.scaleLinear()
    .domain([2200, 2400])
    .range([0, w]);

  var xAxis = d3.axisBottom()
    .scale(timeScale);



  var yAxis = d3.axisLeft()
    .scale(axisRankScale);

  var toolTip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

  var transDown = 20;
  var transRight = 100;

  //h = 700;
  // h=h*1.2;
  //w=w*1.2;
  //w= 300;


  var theBody = d3.select("#container")
    .append("svg")

  .attr("height", svgH * 1.4)
    .attr("width", w * 1.6)

  .attr("transform", "translate(50, 50)")
    .append("g")
    .attr("transform", "translate(20, 20)");

  theBody.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 50)
    .attr("x", -(h / 2))
    //.attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Rank");

  theBody.append("text")

  .attr("y", h + margin.top)
    .attr("x", w / 1.5)

  .style("text-anchor", "middle")
    .text("Seconds");



  theBody.selectAll("foo")
    .data(timeArray)
    .enter()
    .append("text")
    .text(function(d) {
      var index = d[0];
      var _this = data[index];

      return _this.Name;
    })
    .attr("x", function(d) {
      return timeScale((d[1]));
    })
    .attr("y", function(d) {
      return rankScale((d[0]));
    })
    .attr("font-size", "10px")
    .attr("transform", "translate(" + (transRight + 16) + "," + transDown + ")");

  theBody.selectAll("circle")
    .data(timeArray)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
      return timeScale(d[1]);
    })
    .attr("cy", function(d) {
      return rankScale((d[0]));
    })
    .attr("r", 10)
    .attr("fill", "green")
    .attr("stroke", "black")
    .attr("transform", "translate(" + transRight + "," + transDown + ")")

  .on("mouseout", function() {

      toolTip.style("opacity", 0.0);


    })
    .on("mouseover", function(d) {

      var index = d[0];
      var _this = data[index];

      var time = _this.Time,
        name = _this.Name,
        year = _this.Year,
        dope = _this.Doping;

      if (dope === "") {
        dope = "No doping allegations!";

      }

      toolTip.html(name + "<br>" + year + "<br>" + time + " <br>---<br>" + dope)
        .style("opacity", 1)
        .style("left", ((d3.event.pageX) + 40) + "px")
        .style("top", ((d3.event.pageY) + 0) + "px");
    });






}; // end pushArray main

svg {
  border: solid;
}

#container {
  border: solid green;
  width: 100vw;
  height: 100vh;
}

div.tooltip {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 12vw;
  height: 25vh;
  padding: 2px;
  font: 12px sans-serif;
  font-weight: bold;
  background: rgb(255, 82, 80);
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="container">
  <div>tour de france
    <div></div>

PS：在文本选择中，请勿执行theBody.selectAll("text")，因为该SVG中已经有文本。而是选择不存在的内容，例如theBody.selectAll("foo")。