NVD3.js-缺少X轴刻度

NVD3.js - Missing X-Axis Ticks

本文关键字：js- 缺少 NVD3      更新时间：2023-09-26

我刚刚开始将NVD3.js用于我正在处理的数据可视化任务。http://nvd3.org/

我正在创建一个包含3个不同系列的折线图：https://i.stack.imgur.com/qIEDR.png

我的x轴标签有问题。首先，指导方针没有正确排列。我认为这是因为x-min和x-max值与刻度重叠，使所有值都相差一。此外，该系列中的某些日期在刻度中丢失（即，在本例中缺少12/6，尽管它在我的数据集中定义）。我很确定这是因为nvd3js默认为每个轴10个刻度。

我尝试使用chart.xAxis.ticks(12)指定刻度计数，但似乎没有任何作用。

问题

  • 我如何正确设置最小和最大x轴刻度，使它们不会干扰我的刻度，并且指导方针会对齐？（即12.01和12.12在我的图像中用粗体显示）

  • 如何强制显示所有x轴刻度，而不仅仅是nvd3选择的10个？

代码：

<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<link href="teststyle.css" rel="stylesheet" type='text/css'>
<style>
#chart13, #chart14 {
   overflow: scroll;
   width: 500px;
   height: 300px;
}
#chart13 svg, #chart14 svg {
  width: 700px;
  height: 400px;
}
</style>
<body>
  <h3>Line Chart</h3>
  <div style='position:relative;'>
  <div class='chart full' id='chart10'>
    <svg></svg>
  </div>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/interactiveLayer.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/line.js"></script>
<script src="../src/models/lineChart.js"></script>
<script>
var dataset = [{"values":[{"x":1385874000000,"y":"690558"},{"x":1385960400000,"y":"607800"},{"x":1386046800000,"y":"740914"},{"x":1386133200000,"y":"885053"},{"x":1386219600000,"y":"862322"},{"x":1386306000000,"y":"814503"},{"x":1386392400000,"y":"929606"},{"x":1386478800000,"y":"680305"},{"x":1386565200000,"y":"595698"},{"x":1386651600000,"y":"734257"},{"x":1386738000000,"y":"835216"},{"x":1386824400000,"y":"1101351"}],"key":"Num Processed","color":"#e41a1c","area":true},{"values":[{"x":1385874000000,"y":"68494"},{"x":1385960400000,"y":"53720"},{"x":1386046800000,"y":"86944"},{"x":1386133200000,"y":"99616"},{"x":1386219600000,"y":"91489"},{"x":1386306000000,"y":"89277"},{"x":1386392400000,"y":"78585"},{"x":1386478800000,"y":"60501"},{"x":1386565200000,"y":"44796"},{"x":1386651600000,"y":"73843"},{"x":1386738000000,"y":"89011"},{"x":1386824400000,"y":"120769"}],"key":"Num Added","color":"#377eb8","area":true},{"values":[{"x":1385874000000,"y":"1886"},{"x":1385960400000,"y":"1698"},{"x":1386046800000,"y":"2896"},{"x":1386133200000,"y":"3301"},{"x":1386219600000,"y":"3111"},{"x":1386306000000,"y":"3109"},{"x":1386392400000,"y":"2492"},{"x":1386478800000,"y":"1921"},{"x":1386565200000,"y":"1488"},{"x":1386651600000,"y":"2010"},{"x":1386738000000,"y":"3402"},{"x":1386824400000,"y":"2650"}],"key":"Num DNS Added","color":"#984ea3","area":true}];
d3.select("body").on("keydown",function() {
  if (d3.event.ctrlKey && d3.event.which === 75) {
     alert("keydowned");
  }
});
defaultChartConfig("chart10", dataset, true, true);
function defaultChartConfig(containerid, data, guideline, useDates, auxOptions) {
  if (auxOptions === undefined) auxOptions = {};
  if (guideline === undefined) guideline = true;
  nv.addGraph(function() {
var chart;
chart = nv.models.lineChart().useInteractiveGuideline(guideline);
var fullChartHeight = 500 - chart.margin().top - chart.margin().bottom;
chart
  .x(function(d,i) { 
    return d.x;
  })
  .yDomain([0, 1000, 4000, 100000, 5000000])   //Using a polylinear scale
  .yRange([fullChartHeight, 375, 250, 125, 0]);
if (auxOptions.width) 
  chart.width(auxOptions.width);
if (auxOptions.height)
  chart.height(auxOptions.height);
if (auxOptions.forceY) 
  chart.forceY([0]);
chart.margin({right: 40, left: 100});
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%m.%d')(new Date(d)) });

chart.yAxis
    .axisLabel('Amount');
d3.select('#' + containerid + ' svg')
    .datum(data)
    .call(chart);
nv.utils.windowResize(chart.update);
return chart;
  });
}
</script>

要使轴正确，需要将Date对象传递给NVD3。也就是说，代替

chart
  .x(function(d,i) { 
    return d.x;
  })

进行

chart
  .x(function(d,i) { 
    return new Date(d.x);
  })

那么您也不需要在.tickFormat中再这样做了。至于记号，强制显示所有记号值的唯一方法是使用.tickValues()显式设置它们。有关更多信息，请参阅此问题。

相关文章：