Javascript 在D3绘图上切断Y轴标签_Javascript_D3.js

Javascript 在D3绘图上切断Y轴标签

javascript d3.js

Javascript 在D3绘图上切断Y轴标签,javascript,d3.js,Javascript,D3.js,我有一个D3的多线图：但是正如你所看到的，y轴标签的开头被切掉了——有人知道如何正确显示完整的标签吗如果您对如何将x轴标签旋转90度有任何建议，也会有所帮助以下是生成绘图的完整代码： <!DOCTYPE html> <html lang='en'> <head> <link href='http://getbootstrap.com/dist/css/bootstrap.min.css' rel='stylesheet'> &l

我有一个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>


.轴路径{
填充：无；
行程：777；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：Lato；
字体大小：13px；
}
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（函数（prev，curr）{
log（'curr=>'，curr）；
返回{
xMin:Math.min（prev.xMin，curr.x），
xMax:Math.max（prev.xMax，curr.x），
yMin:Math.min（上一个yMin，当前），
yMax:Math.max（上一个yMax，curr.y），
}
}, {
xMin:Number.MAX\u SAFE\u整数，
xMax:-1，
yMin:Number.MAX\u SAFE\u整数，
yMax:-1
});
log（'values=>'，values）；
var vis=d3。选择（#可视化），
宽度=1200，
高度=800，
边距={
前20名，
右:20,，
底数：20，
左：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（）
.刻度（xScale），
yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（左）；
视觉属性（“宽度”，宽度）
.attr（“高度”，高度）；
vis.append（'svg:g'）
.attr（'class'，'x轴'）
.attr（'transform'，'translate（0'，+（HEIGHT-MARGINS.bottom）+'））
.呼叫（xAxis）；
vis.append（'svg:g'）
.attr（'class'，'y轴'）
.attr（'transform'，'translate（+（MARGINS.left）+'，0'））
.呼叫（yAxis）；
var lineGen=d3.svg.line（）
.x（功能（d）{
返回x刻度（d.x）；
})
.y（功能（d）{
返回y刻度（d.y）；
})
.插入（“基础”）；
vis.append（'svg:path'）
.attr（'d'，lineGen（heapUsed））
.attr（'笔划'，'绿色'）
.attr（'stroke-width'，2）
.attr（'fill'，'none'）；
vis.append（'svg:path'）
.attr（'d'，lineGen（heapTotal））
.attr（'笔划'，'蓝色'）
.attr（'stroke-width'，2）
.attr（'fill'，'none'）；
vis.append（'svg:path'）
.attr（'d'，lineGen（rss））
.attr（'笔划'，'红色'）
.attr（'stroke-width'，2）
.attr（'fill'，'none'）；

一种简单的

css

方法是为

svg

元素提供一些

填充。这将使地图保持更好的形状
方法1:只需更改脚本中的左边距值：
MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50 // change this to something larger like 100
  },

方法2：使用CSS
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（函数(
前，
咖喱
) {
log（“curr=>”，curr）；
返回{
xMin:Math.min（prev.xMin，curr.x），
xMax:Math.max（prev.xMax，curr.x），
yMin:Math.min（上一个yMin，当前），
yMax:Math.max（上一个yMax，curr.y）
};
}, {
xMin:Number.MAX\u SAFE\u整数，
xMax:-1，
yMin:Number.MAX\u SAFE\u整数，
yMax:-1
});
log（“values=>”，values）；
var vis=d3。选择（“可视化”），
宽度=1200，
高度=800，
边距={
前20名，
右:20,，
底数：20，
左：50
},
xScale=d3.0刻度
.linear（）
.range（[MARGINS.left，WIDTH-MARGINS.right]）
.domain（[values.xMin-50，values.xMax+50]），
yScale=d3.0刻度
.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（“左”）；
vis.attr（“宽度”，宽度）。attr（“高度”，高度）；
可见光
.append（“svg:g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度-边距.底部）+”）
.呼叫（xAxis）；
可见光
.append（“svg:g”）
.attr（“类”、“y轴”）
.attr（“转换”、“平移”（+MARGINS.left+”，0））
.呼叫（yAxis）；
var lineGen=d3.svg
.第（）行
.x（功能（d）{
返回x刻度（d.x）；
})
.y（功能（d）{
返回y刻度（d.y）；
})
.插入（“依据”）；
可见光
.append（“svg:path”）
.attr（“d”，lineGen（heapUsed））
.attr（“笔划”、“绿色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；
可见光
.append（“svg:path”）
.attr（“d”，lineGen（heapTotal））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；
可见光
.append（“svg:path”）
.attr（“d”，lineGen（rss））
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）
#可视化{
填充：0px 20px；
}
.轴路径{
填充：无；
行程：777；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：Lato；
字体大小：13px；
}
该文件设置得很好，使操作非常简单。您只需更改左边距即可。像75这样的东西似乎可以防止剪切轴标签
MARGINS = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 75
},

类jumbotron
正在为整个div添加一个边距，如果这将所有内容推到最右边，您可能需要更改该边距。请注意，我删除了一些数据，