如何使用D3的time.format

Question

這JSFiddle及以下使用摘錄如下格式格式化日期：

"%d-%b-%y" 

對於日期是這樣的：

"1-May-12" 

var margin = { 
 
    top: 30, 
 
    right: 20, 
 
    bottom: 30, 
 
    left: 50 
 
}; 
 
var width = 600 - margin.left - margin.right; 
 
var height = 270 - margin.top - margin.bottom; 
 

 
var parseDate = d3.time.format("%d-%b-%y").parse; 
 

 
var x = d3.time.scale().range([0, width]); 
 
var y = d3.scale.linear().range([height, 0]); 
 

 
var xAxis = d3.svg.axis().scale(x) 
 
    .orient("bottom").ticks(5); 
 

 
var yAxis = d3.svg.axis().scale(y) 
 
    .orient("left").ticks(5); 
 

 
var valueline = d3.svg.line() 
 
    .x(function (d) { 
 
     return x(d.date); 
 
    }) 
 
    .y(function (d) { 
 
     return y(d.close); 
 
    }); 
 

 
var svg = d3.select("body") 
 
    .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 + ")"); 
 

 
// Get the data 
 
var data = [{ 
 
    date: "1-May-12", 
 
    close: "58.13" 
 
}, { 
 
    date: "30-Apr-12", 
 
    close: "53.98" 
 
}, { 
 
    date: "27-Apr-12", 
 
    close: "67.00" 
 
}, { 
 
    date: "26-Apr-12", 
 
    close: "89.70" 
 
}, { 
 
    date: "25-Apr-12", 
 
    close: "99.00" 
 
}]; 
 

 
data.forEach(function (d) { 
 
    d.date = parseDate(d.date); 
 
    d.close = +d.close; 
 
}); 
 

 
// Scale the range of the data 
 
x.domain(d3.extent(data, function (d) { 
 
    return d.date; 
 
    })); 
 
y.domain([0, d3.max(data, function (d) { 
 
    return d.close; 
 
    })]); 
 

 
svg.append("path") // Add the valueline path. 
 
.attr("d", valueline(data)); 
 

 
svg.append("g") // Add the X Axis 
 
.attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
svg.append("g") // Add the Y Axis 
 
.attr("class", "y axis") 
 
    .call(yAxis);

body { 
 
    font: 12px Arial; 
 
} 
 
path { 
 
    stroke: steelblue; 
 
    stroke-width: 2; 
 
    fill: none; 
 
} 
 
.axis path, .axis line { 
 
    fill: none; 
 
    stroke: grey; 
 
    stroke-width: 1; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

我的日期是這樣的：

"24/02/2015" 

所以，我想這樣的格式將工作：

"%d/%m/%y" 

但事實並非如此;它返回null。我應該使用什麼？

Answer 1

是你想要的嗎？

var margin = { 
 
    top: 30, 
 
    right: 20, 
 
    bottom: 30, 
 
    left: 50 
 
}; 
 
var width = 600 - margin.left - margin.right; 
 
var height = 270 - margin.top - margin.bottom; 
 

 
var parseDate = d3.time.format("%d-%m-%y").parse; 
 

 
var x = d3.time.scale().range([0, width]); 
 
var y = d3.scale.linear().range([height, 0]); 
 

 
var xAxis = d3.svg.axis().scale(x) 
 
    .orient("bottom").ticks(5); 
 

 
var yAxis = d3.svg.axis().scale(y) 
 
    .orient("left").ticks(5); 
 

 
var valueline = d3.svg.line() 
 
    .x(function (d) { 
 
     return x(d.date); 
 
    }) 
 
    .y(function (d) { 
 
     return y(d.close); 
 
    }); 
 

 
var svg = d3.select("body") 
 
    .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 + ")"); 
 

 
// Get the data 
 
var data = [{ 
 
    date: "1-1-12", 
 
    close: "58.13" 
 
}, { 
 
    date: "30-2-12", 
 
    close: "53.98" 
 
}, { 
 
    date: "27-3-12", 
 
    close: "67.00" 
 
}, { 
 
    date: "26-4-12", 
 
    close: "89.70" 
 
}, { 
 
    date: "25-5-12", 
 
    close: "99.00" 
 
}]; 
 

 
data.forEach(function (d) { 
 
    d.date = parseDate(d.date); 
 
    d.close = +d.close; 
 
}); 
 

 
// Scale the range of the data 
 
x.domain(d3.extent(data, function (d) { 
 
    return d.date; 
 
    })); 
 
y.domain([0, d3.max(data, function (d) { 
 
    return d.close; 
 
    })]); 
 

 
svg.append("path") // Add the valueline path. 
 
.attr("d", valueline(data)); 
 

 
svg.append("g") // Add the X Axis 
 
.attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
svg.append("g") // Add the Y Axis 
 
.attr("class", "y axis") 
 
    .call(yAxis);

body { 
 
    font: 12px Arial; 
 
} 
 
path { 
 
    stroke: steelblue; 
 
    stroke-width: 2; 
 
    fill: none; 
 
} 
 
.axis path, .axis line { 
 
    fill: none; 
 
    stroke: grey; 
 
    stroke-width: 1; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="http://d3js.org/d3.v3.min.js"></script> 
 
<body></body>