javascript - x 轴标签未显示在 d3 散点图中-6ren

javascript - x 轴标签未显示在 d3 散点图中

转载作者：行者123 更新时间：2023-12-03 04:31:36

我在散点图中添加 x 轴标签时遇到问题。它没有显示，但 y 轴标签显示。

在了解如何使其工作时，我从 this link 获取了信息。，与 this in-depth explanation 一致.

下面有一个最小的 .htm 代码显示了问题。 x轴标签部分:注释//!!!不显示: 在底部。

<!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="http://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script>

var data = [
  {x: 10.0, y: 9.14},
  {x:  8.0, y: 8.14},
  {x: 13.0, y: 8.74},
  {x:  9.0, y: 8.77},
  {x: 11.0, y: 9.26},
  {x: 14.0, y: 8.10},
  {x:  6.0, y: 6.13},
  {x:  4.0, y: 3.10},
  {x: 12.0, y: 9.13},
  {x:  7.0, y: 7.26},
  {x:  5.0, y: 4.74},
];

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 960,
    height = 500;

var x = pad(d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.x; }))
    .range([0, width - margin.left - margin.right]), 40);

var y = pad(d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.y; }))
    .range([height - margin.top - margin.bottom, 0]), 40);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickPadding(8);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickPadding(8);

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

svg.selectAll(".dot")
    .data(data)
  .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", function(d) { return x(d.x); })
    .attr("cy", function(d) { return y(d.y); })
    .attr("r", 12);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + y.range()[0] + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

// !!! DOES NOT SHOW UP:        
// Add the text label for the x axis
svg.append("text")
    .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")  
    .style("text-anchor", "middle")
    .text("x axis label");

// text label for the y axis
svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x", 0 - (height / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("y axis label"); 

function pad(scale, k) {
  var range = scale.range();
  if (range[0] > range[1]) k *= -1;
  return scale.domain([range[0] - k, range[1] + k].map(scale.invert)).nice();
}

</script>

最佳答案

您正在翻译超出 SVG 高度的文本。

它必须是height - margin.bottom，而不是height + margin.bottom:

.attr("transform", "translate(" + (width / 2) + " ," + (height - margin.bottom) + ")")

这是您更新的代码:

path,
line {
  fill: none;
  stroke: black;
}

<body>
  <script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
  <script>
    var data = [{
      x: 10.0,
      y: 9.14
    }, {
      x: 8.0,
      y: 8.14
    }, {
      x: 13.0,
      y: 8.74
    }, {
      x: 9.0,
      y: 8.77
    }, {
      x: 11.0,
      y: 9.26
    }, {
      x: 14.0,
      y: 8.10
    }, {
      x: 6.0,
      y: 6.13
    }, {
      x: 4.0,
      y: 3.10
    }, {
      x: 12.0,
      y: 9.13
    }, {
      x: 7.0,
      y: 7.26
    }, {
      x: 5.0,
      y: 4.74
    }, ];

    var margin = {
        top: 40,
        right: 40,
        bottom: 40,
        left: 40
      },
      width = 960,
      height = 500;

    var x = pad(d3.scale.linear()
      .domain(d3.extent(data, function(d) {
        return d.x;
      }))
      .range([0, width - margin.left - margin.right]), 40);

    var y = pad(d3.scale.linear()
      .domain(d3.extent(data, function(d) {
        return d.y;
      }))
      .range([height - margin.top - margin.bottom, 0]), 40);

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickPadding(8);

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickPadding(8);

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

    svg.selectAll(".dot")
      .data(data)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("cx", function(d) {
        return x(d.x);
      })
      .attr("cy", function(d) {
        return y(d.y);
      })
      .attr("r", 12);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + y.range()[0] + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

    // Add the text label for the x axis
    svg.append("text")
      .attr("transform", "translate(" + (width / 2) + " ," + (height - margin.bottom) + ")")
      .style("text-anchor", "middle")
      .text("x axis label");

    // !!! DOES NOT SHOW UP:
    // text label for the y axis
    svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x", 0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("y axis label");

    function pad(scale, k) {
      var range = scale.range();
      if (range[0] > range[1]) k *= -1;
      return scale.domain([range[0] - k, range[1] + k].map(scale.invert)).nice();
    }

  </script>