私はthis exampleに従っていますが、私はd3 v4を使用しています。私のd.dateは価値がありません。理由を理解できません。 csvファイルに正しい時刻形式があります。手伝って頂けますか？nullのプロパティ 'values'を読み取れません
<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()
\t \t .key(function(d) { return d.indicatorCode;})
\t \t .object(medias)
var series = menu.property("value");
var data = nested[series];
console.log(data);
var keyring = d3.keys(data[0]).filter(function(key) {
\t return (key !== "Sel_name" && key !== "monthCode" && key !== "indicatorCode" && key !== "date");
// console.log(keyring);
\t });
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 = "";
}};
\t </script>私のCVSファイルには、次のようになります、
Sel_name、indicatorCode、日付、monthCode、MEDIA1、MEDIA2、MEDIA3、MEDIA4、MEDIA5、MEDIA6、MEDIA7、MEDIA8メディア9、メディア10、メディア11、メディア12、メディア13 Num_posts_pmon、NPPM、31/01/2012、m1201,217,146,0,1114,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、NP 2012年3月31日、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,07,6、 0,0,127,557,6 Num_posts_pmon、NPPM、30/06/2012、m1206,102,396,0,834,0,0,07,7,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/2012年12月12日、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、2013年12月12日、12月17日 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、2013/30/09、m1309,264,117,0,1690,19 00,14,1507,195,2515,0,105,226,251
行は表示されていますが、まだ問題は1つあります。d.valuesには値がありません：mediaUpdate.select（ "path"） .attr（ "d"、function（d）{return line（d.values）; }）; – Mika
あなたは*別の*問題があります。その場合、それを指定する*別の質問を投稿してください。 –