我关注this example，但我正在使用d3 v4。我的d.date没有价值。无法弄清楚为什么。 csv文件具有正确的时间格式。你能帮助我吗？
<script type="text/javascript">
var margin = {top: 20, right: 80, bottom: 30, left: 50},
w = 800 - margin.left - margin.right,
h = 600 - margin.top - margin.bottom;
var x = d3.scaleTime()
.domain([new Date("January 1, 2012"), new Date("May 31, 2017")])
.range([0, w]);
var y = d3.scaleLinear()
.range([h, 0]);
var xAxis = d3.axisBottom()
.scale(x)
.tickFormat(d3.timeFormat("%m/%Y"));
var yAxis = d3.axisLeft()
.scale(y)
var parseDate = d3.timeParse("%d%m%Y");
console.log(parseDate);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.stat); });
var svg = d3.select("body").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("svg:g")
.attr("class", "x_axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
svg.append("svg:g")
.attr("class", "y_axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Numbers");
var menu = d3.select("#menu select")
.on("change", change);
d3.csv("Data4.csv", function(csv) {
console.log(csv);
medias = csv
redraw();
});
d3.select(window)
.on("keydown", function() { altKey = d3.event.altKey; })
.on("keyup", function() { altKey = false; });
var altKey;
function change() {
clearTimeout(timeout);
d3.transition()
.duration(altKey ? 7500 : 1500)
.each(redraw);
}
function redraw() {
var nested = d3.nest()
.key(function(d) { return d.indicatorCode;})
.object(medias)
var series = menu.property("value");
var data = nested[series];
console.log(data);
var keyring = d3.keys(data[0]).filter(function(key) {
return (key !== "Sel_name" && key !== "monthCode" && key !== "indicatorCode" && key !== "date");
// console.log(keyring);
});
var transpose = keyring.map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: new Date(parseDate(d.date)), stat: d[name]};
})
};
});
console.log(transpose);
x.domain([
d3.min(transpose, function(c) { return d3.min(c.values, function(d) { return d.date; }); }),
d3.max(transpose, function(c) { return d3.max(c.values, function(d) { return d.date; }); })
]);
y.domain([
d3.min(transpose, function(c) { return d3.min(c.values, function(d) { return d.stat; }); }),
d3.max(transpose, function(c) { return d3.max(c.values, function(d) { return d.stat; }); })
]);
var media = svg.selectAll(".media")
.data(transpose)
.enter().append("g")
.attr("class", "media")
.attr("id", function(d) { return d.name; });
media.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
media.append("text")
.attr("class", "names")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.stat) + ")"; })
.attr("x", 4)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
var mediaUpdate = d3.transition(media);
mediaUpdate.select("path")
.attr("d", function(d) { return line(d.values); });
mediaUpdate.select("text")
.attr("transform", function(d) { return "translate(" + x(d.values[d.values.length - 1].date) + "," + y(d.values[d.values.length - 1].stat) + ")"; });
d3.transition(svg).select("y_axis")
.call(yAxis);
d3.transition(svg).select("x_axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
}
var timeout = setTimeout(function() {
menu.property("value", "NSPM").node().focus();
change();
}, 7000);
function smedia() {
var chkbox = document.getElementById("statmedia");
if (chkbox.checked) {
document.getElementById("media5").style.cssText = "opacity:1;",
document.getElementById("media6").style.cssText = "opacity:1;",
document.getElementById("media7").style.cssText = "opacity:1;",
document.getElementById("media8").style.cssText = "opacity:1;"
} else {
document.getElementById("media5").style.cssText = "",
document.getElementById("media6").style.cssText = "",
document.getElementById("media7").style.cssText = "",
document.getElementById("media8").style.cssText = "";
}};
function nstmedia() {
var chkbox = document.getElementById("nonstmedia")
if (chkbox.checked) {
document.getElementById("media1").style.cssText = "opacity:1;",
document.getElementById("media2").style.cssText = "opacity:1;",
document.getElementById("media3").style.cssText = "opacity:1;",
document.getElementById("media4").style.cssText = "opacity:1;",
document.getElementById("media5").style.cssText = "opacity:1;",
document.getElementById("media6").style.cssText = "opacity:1;",
document.getElementById("media7").style.cssText = "opacity:1;",
document.getElementById("media8").style.cssText = "opacity:1;",
document.getElementById("media9").style.cssText = "opacity:1;"
} else {
document.getElementById("media1").style.cssText = "",
document.getElementById("media2").style.cssText = "",
document.getElementById("media3").style.cssText = "",
document.getElementById("media4").style.cssText = "",
document.getElementById("media5").style.cssText = "",
document.getElementById("media6").style.cssText = "",
document.getElementById("media7").style.cssText = "",
document.getElementById("media8").style.cssText = "",
document.getElementById("media9").style.cssText = "";
}};
</script>
我的cvs文件如下所示：
Sel_name，indicatorCode，日期，monthCode，Media1中，媒体2，媒体3，media4，media5，MEDIA6，media7，media8，media9，media10，media11，media12，media13 Num_posts_pmon，NPPM，31/01/2012，m1201,217,146,0,1114,0,0,0,0,0,0,0,0,54 Num_posts_pmon，NPPM，29/02/2012，m1202,159,161,0,1402,0,0,0,0,0,0,0,0,31 Num_posts_pmon，NPPM，31/03/2012，m1203,8,7,0,1212,0,0,0,24,0,0,0,28,17 Num_posts_pmon，NPPM，30/04/2012，m1204,10,14,0,1004,0,0,0,111,0,0,26,28,6 Num_posts_pmon，NPPM，31/05/2012，m1205,15,73,0,1070,0,0,0,76,0,0,127,557,6 Num_posts_pmon，NPPM，30/06/2012，m1206,102,396,0,834,0,0,0,97,0,0,23,893,1 Num_posts_pmon，NPPM，31/07/2012，m1207,148,276,0,993,0,0,0,63,0,0,67,602,0 Num_posts_pmon，NPPM，31/08/2012，m1208,167,189,0,909,34,0,0,54,0,0,31,606,3 Num_posts_pmon，NPPM，30/09/2012，m1209,176,196,0,991,254,0,0,80,0,0,81,608,8 Num_posts_pmon，NPPM 31/10/2012年，m1210,121,184,0,1064,190,0,0,41,0,0,93,600,100 Num_posts_pmon，NPPM 30/11/2012年，m1211,107,137,0,1301,78,0,0,68,0,0,110,416,116 Num_posts_pmon，NPPM 31/12/2012年，m1212,73,108,0,1190,40,0,0,41,0,0,163,306,158 Num_posts_pmon，NPPM，31/01/2013，m1301,98,122,0,1266,121,0,0,53,0,0,137,329,201 Num_posts_pmon，NPPM，28/02/2013，m1302,92,108,0,1248,175,0,0,32,0,0,86,221,205 Num_posts_pmon，NPPM，31/03/2013，m1303,95,101,0,1330,88,0,0,59,0,0,112,160,243 Num_posts_pmon，NPPM，30/04/2013，m1304,122,127,0,1764,280,0,0,61,0,0,151,264,189 Num_posts_pmon，NPPM，31/05/2013，m1305,89,90,0,1645,630,0,785,123,715,0,144,275,203 Num_posts_pmon，NPPM，30/06/2013，m1306,83,103,0,1541,830,0,1105,130,1425,0,99,260,268 Num_posts_pmon，NPPM，31/07/2013，m1307,89,111,0,1468,895,0,1515,133,1443,0,40,145,318 Num_posts_pmon，NPPM，31/08/2013，m1308,82,86,0,1508,1105,0,1720,125,1488,0,65,227,250 Num_posts_pmon，NPPM，30/09/2013，m1309,264,117,0,1690,1900,14,1507,195,2515,0,105,226,251
答案 0 :(得分：2)
你的指定者错了，你忘记了正斜线。
由于您的日期是这样的：
31/01/2012
您的说明者应该是：
var parseDate = d3.timeParse("%d/%m/%Y");
除此之外，您不需要new Date函数中的map：
var date = "31/01/2012";
var parseDate = d3.timeParse("%d/%m/%Y");
console.log(parseDate(date))
console.log(new Date(parseDate(date)))<script src="https://d3js.org/d3.v4.min.js"></script>