Я сейчас пытаюсь сделать простой график, подобный этому: http://bl.ocks.org/d3noob/8952219, но
Я не понимаю, почему я получаю эту ошибку:
Ошибка типа: t.slice не является функцией
Это из-за моего объекта datas_list?
Мне нужно разобрать файл, и я решил сохранить в новом объекте некоторые данные из этого файла
<script>
var list_datas = [];
var i=0;
var chaine="Datas list"
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y-%m").parse;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y-%m"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
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 + ")");
d3.json("testSerialisation.ujson", function(error, data) {
if (error) throw error;
function compare(x, y) {
return x.lines - y.lines;
}
console.log(data);
for (var key in data.datas) {
if (key.indexOf(chaine) != -1) {
date = new Date(((key.split(","))[2]));
//date = (`${date.toLocaleDateString("fr-FR")} ${date.toLocaleTimeString("fr-FR", options)}`);
console.log(date);
line = (key.split(","))[3];
datas_line=(`${data.datas[key]}`).split(","); // tableau de données
list_datas[i] = {lines: line, dates: date,datas:datas_line};
i++;
}
}
data_test = list_datas.sort(compare);
console.log(data_test);
// STARTING HERE
data_test.forEach(function(d) {
d.dates = parseDate(d.dates);
d.lines = +d.lines;
});
x.domain(data_test.map(function(d) { return d.dates; }));
y.domain([0, d3.max(data_test, function(d) { return d.lines; })]);
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", "-.55em")
.attr("transform", "rotate(-90)" );
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("lines ($)");
svg.selectAll("bar")
.data(data_test)
.enter().append("rect")
.style("fill", "steelblue")
.attr("x", function(d) { return x(d.dates); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.lines); })
.attr("height", function(d) { return height - y(d.lines);});
});
<script src="http://d3js.org/d3.v3.min.js"></script>
О, я забыл, пример данных, которые я извлекаю из моего файла JSON. Сейчас я пытаюсь просмотреть дату по оси и линии как y. Но позже я хотел бы видеть дату и цикл в массиве температур. , (Одна температура на оси для 28 температуры как у)
"datas":{
"3,122,4/13/2018 8:40:06 AM,15,Datas list":[
"170",
"171",
"171",
"172",
"171",
"169",
"169",
"171",
"171",
"172",
"173",
"171",
"171",
"168",
"171",
"171",
"171",
"171",
"170",
"169",
"168",
"168",
"169",
"169",
"170",
"168",
"168",
"167"
],