1
我刚开始使用NVD3.js来处理我正在处理的数据可视化任务。 http://nvd3.org/NVD3.js - 缺少X轴蜱
我创建一个polylinear折线图与3种不同的系列： http://i.imgur.com/3I10aBD.png
我有我的x轴标签的问题。首先，指导方针没有正确排列。我认为这是因为x-min和x-max的值与ticks重叠，使得所有的东西都关闭。 另外，系列中的某些日期从滴答中缺失（即在本例中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>