Question

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

我正在创建一个包含3个不同系列的多线性折线图： http://i.imgur.com/3I10aBD.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>

Answer 1

要使轴正确，您需要将Date个对象传递给NVD3。也就是说，而不是

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

DO

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

然后你也不需要在.tickFormat中这样做了。至于刻度线，强制显示所有刻度值的唯一方法是使用.tickValues()显式设置它们。有关更多信息，请参阅this question。

NVD3.js - 缺少X轴刻度

1 个答案: