d3.js 抛出错误 't.slice is not a function'
d3.js throws an error 't.slice is not a function'
我在网页上创建了一些折线图。下面的代码很长，但实际上很简单。它通过 ajax 从数据库中获取一些数据，然后格式化和过滤数据（因此有两个对象数组 nodata 和 rawdata）并将数据传递给 d3.js 折线图。我将折线图嵌入到函数 draw() 中。此功能在点击适当数据时启动。当我开始第一个折线图时，我工作得很好，但是当我尝试给另一个折线图加注星标时，它会抛出一个错误 't.slice is not a function'。工作很好分开但不在一起。我是否遗漏了什么...如何重新设置折线图？
jQuery(document).ready(function($) {
function wykresy(iii) {
var fff;
//Zmienna wysyła id postu do ajaxa
var ids = iii;
var data = {
'action': 'press_release',
'ids' : ids,
'security': frontendajax.nncs
};
$.post(frontendajax.ajaxurl, data, function(response) {
var fff = response;
//String z bazą danych pochodzącą z inputu baza w adminie via custom post type 'baza'
return fff;
}).then(function(fff){
//Formatowanie stringa z bazą danych
var ttt = fff.split("; ");
var i;
//Array of objects z bazą danych
var rawdata = [];
for (i = 1 ; i < ttt.length ; i++ ) {
//Tworzenie objektów JSON z rekordami bazy danych
var obj = jQuery.parseJSON( ttt[i] );
//console.log(typeof obj);
rawdata.push(obj);
}
//console.log(data);
// Get the data
//Formatowanie daty
//Filtrowanie danych
var fel = $('#dodaty').val();
var tttt = moment(fel, "DD-MM-YYYY").toDate();
var smak = moment(rawdata[rawdata.length-1].label, "YYYY-MM-DD").subtract(8, 'month').toDate();
var nodata = [];
var w;
for(w = 0 ; w < rawdata.length ; w++) {
var y = rawdata[w];
if(moment(y.label, "YYYY-MM-DD").toDate() < smak) {
nodata.push(y);
}
}
//console.log(data);
console.log(nodata[0].label);
console.log(rawdata[0].label);
console.log(nodata[0].value1);
console.log(rawdata[0].value1);
console.log(typeof nodata[0].label);
console.log(typeof rawdata[0].label);
console.log(typeof nodata[0].value1);
console.log(typeof rawdata[0].value1);
function draw(data, iii) {
//Formatowanie wszystkich rekordów w bazie
var parselabel = d3.time.format("%Y-%m-%d").parse;
data.forEach(function(d){
return d.label = parselabel(d.label);
});
//Wartość pierwszego rekordu bazy
var first = data[0].value1;
//Wartość ostatniego rekordu bazy
var last = data[data.length - 1].value1;
//Obliczanie wartości procentowej wzrostu dla ostaniego rekordu w bazie
var lastPercent = Math.round(((data[data.length - 1].value1 - data[0].value1) / data[0].value1)*100);
//Wartość ostatniego rekordu w bazie - data
var lastDay = data[data.length - 1].label;
//Wartość pierwszego rekordu w bazie - data
var firstDay = data[0].label;
//InfoBox nad tabelą ():
$('.info-'+ iii + ' > .tthree > p > span').text(" " + lastDay.toLocaleDateString());
$('.info-'+ iii + ' > .tone > h5').html(last + "<span> PLN</span>");
//Inputy nad tabelą - zakres dat
$('.wykres-'+ iii + ' > .inputy > #oddaty').val(firstDay.toLocaleDateString());
$('.wykres-'+ iii + ' > .inputy > #dodaty').val(lastDay.toLocaleDateString());
//Marginesy dla obrazka SVG
//Na podstawie szerokości aktualnego okna przeglądarki
var szerokosci = $('.wykres').width();
//alert(szerokosci);
var margin = {top: 60, right: 40, bottom: 60, left: 60},
width = szerokosci - margin.left - margin.right,
height = 453 - margin.top - margin.bottom;
//Oblicza wartość x dla y przy funkcji mouseover
var bisectDate = d3.bisector(function(d) { return d.label; }).left;
//Format daty
var formatDate = d3.time.format("%d-%b");
//Formatowanie parametrów linii osi x i y
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
//Rysuje oś x wykresu oraz przedziały na niej
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(4).tickFormat(d3.time.format("%Y-%m-%d"));
//Rysuje oś y wykresu oraz przedziały na niej
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(4).tickFormat(function(d) { return Math.round(((d - data[0].value1) / data[0].value1)*100) + "%"; });
//Deklaracja wykresu na osi y,x
var valueline = d3.svg.line()
.x(function(d) { return x(d.label); })
.y(function(d) { return y(d.value1); });
//Rysuje główne okno svg z grupą elementów g
var troll = d3.select("#tests-"+ iii).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var svg = troll
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Dodajemy domenę wartości osi x i y - zmienia skalę osi x i y z parametrów width i height na skalę określoną przez zakres danych
x.domain(d3.extent(data, function(d) { return d.label; }));
y.domain([data[0].value1, d3.max(data, function(d) {
return Math.max(d.value1); })]);
//
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4);
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(4);
}
// Dodajemy linię wykresu danych do obrazka svg
svg.append("path")
.attr("d", valueline(data))
.attr("class", "wykresik");
// Dodajemy zdefiniowaną oś x wykresu
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
//Dodajemy zdefiniowaną oś y wykresu
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
//Rysuje element grupowy, który pomieści animacje funkcji mouseover
var focus = svg.append("g")
.style("display", "none");
//Dodajemy siatk wykresu - w tym wypadku tylko horyzontalną siatkę
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
// Rysujemy linię x animacji mouseover
focus.append("line")
.attr("class", "x param")
.attr("y1", 0)
.attr("y2", height);
// Rysujemy linię y animacji mouseover
focus.append("line")
.attr("class", "y param")
.attr("x1", width)
.attr("x2", width);
// Dodajemy kółeczko animacji mouseover
focus.append("circle")
.attr("class", "y circle")
.attr("r", 6);
// Dodajemy tekst do kółeczka a aktualną wartością
focus.append("text")
.attr("class", "y1 text")
.style("opacity", 0.8)
.attr("dx", 12)
.attr("dy", "-.6em");
focus.append("text")
.attr("class", "y2 text")
.attr("dx", 12)
.attr("dy", "-.6em");
// Dodajemy tekst do kółeczka a aktualną datą
focus.append("text")
.attr("class", "y3 text")
.style("opacity", 0.8)
.attr("dx", 12)
.attr("dy", "1em");
focus.append("text")
.attr("class", "y4 text")
.attr("dx", 12)
.attr("dy", "1em");
// Dodajemy kwadrat który będzie służył jako canvas dla pozycji myszy
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
var legenda = svg.append("g");
legenda.append("text")
.attr("class", "wyniktext")
.attr("x", 0)
.attr("y", -20)
.text("Wynik: ");
legenda.append("text")
.attr("class", "mytext")
.attr("x", 80)
.attr("y", -20)
.text(lastPercent + "%");
//Funkcja definiuje animacje zależne od pozycji myszy na wykresie
function mousemove() {
////console.log(bisectDate);
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.label > d1.label - x0 ? d1 : d0;
//console.log(d.label);
//console.log(d.value1);
focus.select("circle.y")
.attr("transform", "translate(" + x(d.label) + "," + y(d.value1) + ")");
focus.select("circle.y")
.attr("transform", "translate(" + x(d.label) + "," + y(d.value1) + ")");
focus.select("text.y1")
.attr("transform","translate(" + x(d.label) + "," + y(d.value1) + ")")
.text(d.value1);
focus.select("text.y2")
.attr("transform","translate(" + x(d.label) + "," + y(d.value1) + ")")
.text(d.value1);
focus.select("text.y3")
.attr("transform","translate(" + x(d.label) + "," + y(d.value1) + ")")
.text(formatDate(d.label));
focus.select("text.y4")
.attr("transform","translate(" + x(d.label) + "," +y(d.value1) + ")")
.text(formatDate(d.label));
legenda.select("text.mytext").text(Math.round(((d.value1 - data[0].value1) / data[0].value1)*100) + "%");
focus.select(".x")
.attr("transform","translate(" + x(d.label) + "," + 0 + ")")
.attr("y2", height);
focus.select(".y")
.attr("transform","translate(" + width * -1 + "," + y(d.value1) + ")")
.attr("x2", width + width);
}
}
$('#test').click(function(){
draw(nodata, 30);
});
$('#test3m').click(function(){
draw(rawdata, 30);
});
});
}
wykresy(30);
});
您似乎在尝试重新解析最初已经解析过的数据（第二次单击图表时，label 已经是 Date）。
我在网页上创建了一些折线图。下面的代码很长，但实际上很简单。它通过 ajax 从数据库中获取一些数据，然后格式化和过滤数据（因此有两个对象数组 nodata 和 rawdata）并将数据传递给 d3.js 折线图。我将折线图嵌入到函数 draw() 中。此功能在点击适当数据时启动。当我开始第一个折线图时，我工作得很好，但是当我尝试给另一个折线图加注星标时，它会抛出一个错误 't.slice is not a function'。工作很好分开但不在一起。我是否遗漏了什么...如何重新设置折线图？
jQuery(document).ready(function($) {
function wykresy(iii) {
var fff;
//Zmienna wysyła id postu do ajaxa
var ids = iii;
var data = {
'action': 'press_release',
'ids' : ids,
'security': frontendajax.nncs
};
$.post(frontendajax.ajaxurl, data, function(response) {
var fff = response;
//String z bazą danych pochodzącą z inputu baza w adminie via custom post type 'baza'
return fff;
}).then(function(fff){
//Formatowanie stringa z bazą danych
var ttt = fff.split("; ");
var i;
//Array of objects z bazą danych
var rawdata = [];
for (i = 1 ; i < ttt.length ; i++ ) {
//Tworzenie objektów JSON z rekordami bazy danych
var obj = jQuery.parseJSON( ttt[i] );
//console.log(typeof obj);
rawdata.push(obj);
}
//console.log(data);
// Get the data
//Formatowanie daty
//Filtrowanie danych
var fel = $('#dodaty').val();
var tttt = moment(fel, "DD-MM-YYYY").toDate();
var smak = moment(rawdata[rawdata.length-1].label, "YYYY-MM-DD").subtract(8, 'month').toDate();
var nodata = [];
var w;
for(w = 0 ; w < rawdata.length ; w++) {
var y = rawdata[w];
if(moment(y.label, "YYYY-MM-DD").toDate() < smak) {
nodata.push(y);
}
}
//console.log(data);
console.log(nodata[0].label);
console.log(rawdata[0].label);
console.log(nodata[0].value1);
console.log(rawdata[0].value1);
console.log(typeof nodata[0].label);
console.log(typeof rawdata[0].label);
console.log(typeof nodata[0].value1);
console.log(typeof rawdata[0].value1);
function draw(data, iii) {
//Formatowanie wszystkich rekordów w bazie
var parselabel = d3.time.format("%Y-%m-%d").parse;
data.forEach(function(d){
return d.label = parselabel(d.label);
});
//Wartość pierwszego rekordu bazy
var first = data[0].value1;
//Wartość ostatniego rekordu bazy
var last = data[data.length - 1].value1;
//Obliczanie wartości procentowej wzrostu dla ostaniego rekordu w bazie
var lastPercent = Math.round(((data[data.length - 1].value1 - data[0].value1) / data[0].value1)*100);
//Wartość ostatniego rekordu w bazie - data
var lastDay = data[data.length - 1].label;
//Wartość pierwszego rekordu w bazie - data
var firstDay = data[0].label;
//InfoBox nad tabelą ():
$('.info-'+ iii + ' > .tthree > p > span').text(" " + lastDay.toLocaleDateString());
$('.info-'+ iii + ' > .tone > h5').html(last + "<span> PLN</span>");
//Inputy nad tabelą - zakres dat
$('.wykres-'+ iii + ' > .inputy > #oddaty').val(firstDay.toLocaleDateString());
$('.wykres-'+ iii + ' > .inputy > #dodaty').val(lastDay.toLocaleDateString());
//Marginesy dla obrazka SVG
//Na podstawie szerokości aktualnego okna przeglądarki
var szerokosci = $('.wykres').width();
//alert(szerokosci);
var margin = {top: 60, right: 40, bottom: 60, left: 60},
width = szerokosci - margin.left - margin.right,
height = 453 - margin.top - margin.bottom;
//Oblicza wartość x dla y przy funkcji mouseover
var bisectDate = d3.bisector(function(d) { return d.label; }).left;
//Format daty
var formatDate = d3.time.format("%d-%b");
//Formatowanie parametrów linii osi x i y
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
//Rysuje oś x wykresu oraz przedziały na niej
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(4).tickFormat(d3.time.format("%Y-%m-%d"));
//Rysuje oś y wykresu oraz przedziały na niej
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(4).tickFormat(function(d) { return Math.round(((d - data[0].value1) / data[0].value1)*100) + "%"; });
//Deklaracja wykresu na osi y,x
var valueline = d3.svg.line()
.x(function(d) { return x(d.label); })
.y(function(d) { return y(d.value1); });
//Rysuje główne okno svg z grupą elementów g
var troll = d3.select("#tests-"+ iii).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var svg = troll
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Dodajemy domenę wartości osi x i y - zmienia skalę osi x i y z parametrów width i height na skalę określoną przez zakres danych
x.domain(d3.extent(data, function(d) { return d.label; }));
y.domain([data[0].value1, d3.max(data, function(d) {
return Math.max(d.value1); })]);
//
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4);
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(4);
}
// Dodajemy linię wykresu danych do obrazka svg
svg.append("path")
.attr("d", valueline(data))
.attr("class", "wykresik");
// Dodajemy zdefiniowaną oś x wykresu
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
//Dodajemy zdefiniowaną oś y wykresu
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
//Rysuje element grupowy, który pomieści animacje funkcji mouseover
var focus = svg.append("g")
.style("display", "none");
//Dodajemy siatk wykresu - w tym wypadku tylko horyzontalną siatkę
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
// Rysujemy linię x animacji mouseover
focus.append("line")
.attr("class", "x param")
.attr("y1", 0)
.attr("y2", height);
// Rysujemy linię y animacji mouseover
focus.append("line")
.attr("class", "y param")
.attr("x1", width)
.attr("x2", width);
// Dodajemy kółeczko animacji mouseover
focus.append("circle")
.attr("class", "y circle")
.attr("r", 6);
// Dodajemy tekst do kółeczka a aktualną wartością
focus.append("text")
.attr("class", "y1 text")
.style("opacity", 0.8)
.attr("dx", 12)
.attr("dy", "-.6em");
focus.append("text")
.attr("class", "y2 text")
.attr("dx", 12)
.attr("dy", "-.6em");
// Dodajemy tekst do kółeczka a aktualną datą
focus.append("text")
.attr("class", "y3 text")
.style("opacity", 0.8)
.attr("dx", 12)
.attr("dy", "1em");
focus.append("text")
.attr("class", "y4 text")
.attr("dx", 12)
.attr("dy", "1em");
// Dodajemy kwadrat który będzie służył jako canvas dla pozycji myszy
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
var legenda = svg.append("g");
legenda.append("text")
.attr("class", "wyniktext")
.attr("x", 0)
.attr("y", -20)
.text("Wynik: ");
legenda.append("text")
.attr("class", "mytext")
.attr("x", 80)
.attr("y", -20)
.text(lastPercent + "%");
//Funkcja definiuje animacje zależne od pozycji myszy na wykresie
function mousemove() {
////console.log(bisectDate);
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.label > d1.label - x0 ? d1 : d0;
//console.log(d.label);
//console.log(d.value1);
focus.select("circle.y")
.attr("transform", "translate(" + x(d.label) + "," + y(d.value1) + ")");
focus.select("circle.y")
.attr("transform", "translate(" + x(d.label) + "," + y(d.value1) + ")");
focus.select("text.y1")
.attr("transform","translate(" + x(d.label) + "," + y(d.value1) + ")")
.text(d.value1);
focus.select("text.y2")
.attr("transform","translate(" + x(d.label) + "," + y(d.value1) + ")")
.text(d.value1);
focus.select("text.y3")
.attr("transform","translate(" + x(d.label) + "," + y(d.value1) + ")")
.text(formatDate(d.label));
focus.select("text.y4")
.attr("transform","translate(" + x(d.label) + "," +y(d.value1) + ")")
.text(formatDate(d.label));
legenda.select("text.mytext").text(Math.round(((d.value1 - data[0].value1) / data[0].value1)*100) + "%");
focus.select(".x")
.attr("transform","translate(" + x(d.label) + "," + 0 + ")")
.attr("y2", height);
focus.select(".y")
.attr("transform","translate(" + width * -1 + "," + y(d.value1) + ")")
.attr("x2", width + width);
}
}
$('#test').click(function(){
draw(nodata, 30);
});
$('#test3m').click(function(){
draw(rawdata, 30);
});
});
}
wykresy(30);
});
您似乎在尝试重新解析最初已经解析过的数据（第二次单击图表时，label 已经是 Date）。