這是一個qustion，我得到了我的previouse問題的基礎上，可以在這裏找到：link如何在d軸上爲時間刻度特化ticks？
在鏈接有一個小提琴，現在我意識到，如果我有3個日期：
12.12。 12 12點12分十二秒// 12月12日的2012
12.12.12 11時12分12秒
12.12.12 10點12分12秒
其是在同一日期但不同的是隻通過1小時，然後這個迪圖表上未顯示fference。
我只想在x軸上顯示這些日期和時間，這些日期和時間是數據的一部分，並且做出某些事情，因此如果事件發生在相同的日期，實際上可以在圖表上看到1小時的差異，所以情節不會結束在彼此之上。
它可以以任何方式完成？
當創建x軸，則可以指示使用了時間間隔
.ticks(d3.time.hour, 1)
，這將使蜱每隔1小時。有關更多信息，請參閱scale.ticks()的文檔。
這裏的工作代碼
exp1();
function exp1(){
var data = [
{
"CurrentQuantity": "50",
"LastUpdated": "/Date(1420793427983)/"
},
{
"CurrentQuantity": "76",
"LastUpdated": "/Date(1420721731353)/"
},
{
"CurrentQuantity": "20",
"LastUpdated": "/Date(1420714881920)/"
},
{
"CurrentQuantity": "24",
"LastUpdated": "/Date(1420713917820)/"
}//,
// {
// "CurrentQuantity": "25",
// "LastUpdated": "/Date(1418907098197)/"
// }
];
var margin = {top: 20, right: 20, bottom: 85, left: 50},
width = 1500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");
var x = d3.time.scale().range([0, width]);
x.tickFormat("%Y-%m-%d %I:%M:%S")
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(function(d) {
return formatDate(d);
})
.ticks(d3.time.hour, 1)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
data.forEach(function(d) {
var date = new Date(parseInt(d.LastUpdated.substr(6)));
console.log(date)
d.LastUpdated = date;
});
var line = d3.svg.line()
.x(function(d) {
return x(d.LastUpdated);
})
.y(function(d) {
return y(d.CurrentQuantity);
});
var svg = d3.select("#chart1").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(data, function(d) {
return d.LastUpdated;
}));
y.domain(d3.extent(data, function(d) {
return d.CurrentQuantity;
}));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-45)"
});
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text('@Resource.Amount');
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
}
exp2();
function exp2(){
var data = [
{
"CurrentQuantity": "50",
"LastUpdated": "/Date(1420793427983)/"
},
{
"CurrentQuantity": "76",
"LastUpdated": "/Date(1420721731353)/"
},
{
"CurrentQuantity": "20",
"LastUpdated": "/Date(1420714881920)/"
},
{
"CurrentQuantity": "24",
"LastUpdated": "/Date(1420713917820)/"
},
{
"CurrentQuantity": "25",
"LastUpdated": "/Date(1418907098197)/"
}
];
var margin = {top: 20, right: 20, bottom: 85, left: 50},
width = 1500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");
var x = d3.time.scale().range([0, width]);
x.tickFormat("%Y-%m-%d %I:%M:%S")
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(function(d) {
return formatDate(d);
})
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
data.forEach(function(d) {
var date = new Date(parseInt(d.LastUpdated.substr(6)));
console.log(date)
d.LastUpdated = date;
});
var line = d3.svg.line()
.x(function(d) {
return x(d.LastUpdated);
})
.y(function(d) {
return y(d.CurrentQuantity);
});
var svg = d3.select("#chart2").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(data, function(d) {
return d.LastUpdated;
}));
y.domain(d3.extent(data, function(d) {
return d.CurrentQuantity;
}));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-45)"
});
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text('@Resource.Amount');
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
}chart {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
/*display: none;*/
}
.line {
stroke: rgb(142, 188, 0);
stroke-width: 2px;
stroke-linecap: square;
stroke-linejoin: round;
fill-opacity: 1;
stroke-opacity: 1;
fill: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<strong>Chart1</strong>
<div id="chart1"></div>
<br>
<strong>Chart2</strong>
<div id="chart2"></div>
您可以設置刻度值，使用'axis.tickValues顯示（）'。 –
好吧，主要問題是我無法找到一種方法來顯示圖上的1小時差異 – Timsen
當你說它沒有顯示時，你的意思是什麼？軸上的差異是否太小？ –