Question

我有D3的多线图：

但正如您所看到的，y轴标签的开头被切断了 - 任何人都知道如何正确显示完整标签？

如果您对如何将x轴标签旋转90度有任何建议，那也会有所帮助。

以下是生成图表的完整代码：

<!DOCTYPE html>
<html lang='en'>

<head>

  <link href='http://getbootstrap.com/dist/css/bootstrap.min.css' rel='stylesheet'>
  <link href='http://getbootstrap.com/examples/justified-nav/justified-nav.css' rel='stylesheet'>
  <script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>

  <style>

    .axis path {
      fill: none;
      stroke: #777;
      shape-rendering: crispEdges;
    }

    .axis text {
      font-family: Lato;
      font-size: 13px;
    }

  </style>

</head>

<body>

<div class='container'>

  <div class='jumbotron'>

    <svg id='visualisation'></svg>

    <script>

      var heapTotal = JSON.parse('[{"x":1501478175044,"y":18911232},{"x":1501478177048,"y":19959808}]');
      var heapUsed = JSON.parse('[{"x":1501478175044,"y":10492112},{"x":1501478177048,"y":10904080}]');
      var rss = JSON.parse('[{"x":1501478175044,"y":35622912},{"x":1501478177048,"y":36134912}]');

      const values = heapTotal.concat(heapUsed).concat(rss).reduce(function (prev, curr) {

        console.log('curr => ', curr);

        return {
          xMin: Math.min(prev.xMin, curr.x),
          xMax: Math.max(prev.xMax, curr.x),
          yMin: Math.min(prev.yMin, curr.y),
          yMax: Math.max(prev.yMax, curr.y),
        }

      }, {
        xMin: Number.MAX_SAFE_INTEGER,
        xMax: -1,
        yMin: Number.MAX_SAFE_INTEGER,
        yMax: -1
      });

      console.log('values => ', values);

      var vis = d3.select('#visualisation'),
        WIDTH = 1200,
        HEIGHT = 800,
        MARGINS = {
          top: 20,
          right: 20,
          bottom: 20,
          left: 50
        },
        xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([values.xMin - 50, values.xMax + 50]),
        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([values.yMin - 50, values.yMax + 50]),
        xAxis = d3.svg.axis()
        .scale(xScale),
        yAxis = d3.svg.axis()
        .scale(yScale)
        .orient('left');

      vis.attr("width", WIDTH)
      .attr("height", HEIGHT);

      vis.append('svg:g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
      .call(xAxis);

      vis.append('svg:g')
      .attr('class', 'y axis')
      .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
      .call(yAxis);

      var lineGen = d3.svg.line()
      .x(function (d) {
        return xScale(d.x);
      })
      .y(function (d) {
        return yScale(d.y);
      })
      .interpolate('basis');

      vis.append('svg:path')
      .attr('d', lineGen(heapUsed))
      .attr('stroke', 'green')
      .attr('stroke-width', 2)
      .attr('fill', 'none');

      vis.append('svg:path')
      .attr('d', lineGen(heapTotal))
      .attr('stroke', 'blue')
      .attr('stroke-width', 2)
      .attr('fill', 'none');

      vis.append('svg:path')
      .attr('d', lineGen(rss))
      .attr('stroke', 'red')
      .attr('stroke-width', 2)
      .attr('fill', 'none');


    </script>
  </div>

</div>

</body>

</html>

Answer 1

一种简单的css方式是为padding元素提供一些svg。它将使地图保持更好的状态。

方法1：只需更改脚本中的左边距值：

MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50 // change this to something larger like 100
  },

方法2：使用CSS

＆＃13;

var heapTotal = JSON.parse(
  '[{"x":1501478175044,"y":18911232},{"x":1501478177048,"y":19959808}]'
);
var heapUsed = JSON.parse(
  '[{"x":1501478175044,"y":10492112},{"x":1501478177048,"y":10904080}]'
);
var rss = JSON.parse(
  '[{"x":1501478175044,"y":35622912},{"x":1501478177048,"y":36134912}]'
);

const values = heapTotal.concat(heapUsed).concat(rss).reduce(function(
  prev,
  curr
) {
  console.log("curr => ", curr);

  return {
    xMin: Math.min(prev.xMin, curr.x),
    xMax: Math.max(prev.xMax, curr.x),
    yMin: Math.min(prev.yMin, curr.y),
    yMax: Math.max(prev.yMax, curr.y)
  };
}, {
  xMin: Number.MAX_SAFE_INTEGER,
  xMax: -1,
  yMin: Number.MAX_SAFE_INTEGER,
  yMax: -1
});

console.log("values => ", values);

var vis = d3.select("#visualisation"),
  WIDTH = 1200,
  HEIGHT = 800,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
  xScale = d3.scale
    .linear()
    .range([MARGINS.left, WIDTH - MARGINS.right])
    .domain([values.xMin - 50, values.xMax + 50]),
  yScale = d3.scale
    .linear()
    .range([HEIGHT - MARGINS.top, MARGINS.bottom])
    .domain([values.yMin - 50, values.yMax + 50]),
  xAxis = d3.svg.axis().scale(xScale),
  yAxis = d3.svg.axis().scale(yScale).orient("left");

vis.attr("width", WIDTH).attr("height", HEIGHT);

vis
  .append("svg:g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
  .call(xAxis);

vis
  .append("svg:g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + MARGINS.left + ",0)")
  .call(yAxis);

var lineGen = d3.svg
  .line()
  .x(function(d) {
    return xScale(d.x);
  })
  .y(function(d) {
    return yScale(d.y);
  })
  .interpolate("basis");

vis
  .append("svg:path")
  .attr("d", lineGen(heapUsed))
  .attr("stroke", "green")
  .attr("stroke-width", 2)
  .attr("fill", "none");

vis
  .append("svg:path")
  .attr("d", lineGen(heapTotal))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

vis
  .append("svg:path")
  .attr("d", lineGen(rss))
  .attr("stroke", "red")
  .attr("stroke-width", 2)
  .attr("fill", "none");

＆＃13;

#visualisation{
  padding: 0px 20px;
}
.axis path {
      fill: none;
      stroke: #777;
      shape-rendering: crispEdges;
    }

    .axis text {
      font-family: Lato;
      font-size: 13px;
    }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id='visualisation'></svg>

＆＃13;

Answer 2

该文件设置很好，使这很容易。您只需更改左边距即可。像75这样的东西似乎可以让你的轴标签不被裁剪。：

MARGINS = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 75
},

班级jumbotron正在为整个div添加一个边距，你可能需要更改它移动图表，如果这会把所有东西都推到右边。

在D3图上切断Y轴标签

2 个答案: