我有一個名為任務的陣列。我在那里存盤了許多任務。例如：
[
{
"id": "2",
"taskName": "dswrs",
"startDate": "1969-12-31T23:00:00.000Z",
"endDate": "1969-12-31T23:00:55.000Z",
"duration": "1969-12-31T23:00:55.000Z",
"categorie": "Processing"
},
{
"id": "1",
"taskName": "A",
"startDate": "1969-12-31T23:00:30.000Z",
"endDate": "1969-12-31T23:00:55.000Z",
"duration": "1969-12-31T23:00:25.000Z",
"categorie": "Processing"
}
]
在這里你已經可以看到我的問題了。我在 id:1 ( with tasks.push(...))之后添加了 id:2 元素，所以我希望它按以下順序排列：
[
{
"id": "1",
"taskName": "A",
"startDate": "1969-12-31T23:00:30.000Z",
"endDate": "1969-12-31T23:00:55.000Z",
"duration": "1969-12-31T23:00:25.000Z",
"categorie": "Processing"
},
{
"id": "2",
"taskName": "dswrs",
"startDate": "1969-12-31T23:00:00.000Z",
"endDate": "1969-12-31T23:00:55.000Z",
"duration": "1969-12-31T23:00:55.000Z",
"categorie": "Processing"
}
]
只有當新添加的lower startDate元素已經存在比元素時才會出現此問題。問題出在我的 D3.js 代碼中，我用它來在甘特圖中顯示資料。我希望它在gantt.redraw函式中，因為我在將新資料添加到我的任務陣列后直接呼叫它，但我找不到問題。
/* global d3 */
d3.gantt = function () {
var initTimeDomain = function (tasks) {
console.log(tasks);
if (timeDomainMode === FIT_TIME_DOMAIN_MODE) {
if (tasks === undefined || tasks.length < 1) {
timeDomainStart = new Date(0);
timeDomainEnd = new Date(10 ** 5);
return;
}
var tasksOrder = tasks;
tasksOrder.sort(function (a, b) {
return a.endDate - b.endDate;
});
timeDomainEnd = tasksOrder[tasksOrder.length - 1].endDate;
tasksOrder.sort(function (a, b) {
return a.startDate - b.startDate;
});
timeDomainStart = tasksOrder[0].startDate;
}
};
function gantt (tasks) {
initTimeDomain();
initAxis();
var svg = d3.select('svg')
.attr('class', 'chart')
.attr('width', width margin.left margin.right)
.attr('height', height margin.top margin.bottom)
.append('g')
.attr('class', 'gantt-chart')
.attr('width', width margin.left margin.right)
.attr('height', height margin.top margin.bottom)
.attr('transform', 'translate(' margin.left ', ' margin.top ')');
svg.selectAll('.chart')
.data(tasks, keyFunction).enter()
.append('rect')
.attr('rx', 5)
.attr('ry', 5)
.attr('class', function (d) {
if (taskCategorie[d.categorie] == null) { return 'bar-killed'; }
return taskCategorie[d.categorie];
})
.attr('y', 0)
.attr('transform', rectTransform)
// ----.attr('height', function (d) { return y.rangeBand(); })
.attr('height', function (d) { return y.bandwidth(); })
.attr('width', function (d) {
return (x(d.endDate) - x(d.startDate));
});
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0, ' (height - margin.top - margin.bottom) ')')
.transition()
.call(xAxis);
svg.append('g').attr('class', 'y axis').transition().call(yAxis);
return gantt;
};
gantt.redraw = function (tasks) {
console.log("TASKS IN REDRAW: ")
console.log(tasks);
initTimeDomain(tasks);
initAxis();
var svg = d3.select('svg');
var ganttChartGroup = svg.select('.gantt-chart');
var rect = ganttChartGroup.selectAll('rect').data(tasks, keyFunction);
var div = d3.select('body').append('div')
.attr('class', 'tooltip-donut')
.style('opacity', 0);
rect.enter()
.insert('rect', ':first-child')
.on('mouseover', function (d, i) {
d3.select(this).transition()
.duration('50')
.attr('opacity', '.85');
// Makes the new div appear on hover:
div.transition()
.duration(50)
.style('opacity', 1);
div.html(['Taskname: ' i.taskName, 'Start: ' i.startDate.toLocaleTimeString(), 'Ende: ' i.endDate.toLocaleTimeString()].join('<br/>'))
.style('left', (d.pageX 10) 'px')
.style('top', (d.pageY - 15) 'px');
})
.on('mouseout', function (d, i) {
d3.select(this).transition()
.duration('50')
.attr('opacity', '1');
div.transition()
.duration('50')
.style('opacity', 0);
})
.attr('rx', 5)
.attr('ry', 5)
.attr('class', function (d) {
if (taskCategorie[d.categorie] == null) { return 'bar-killed'; }
return taskCategorie[d.categorie];
})
.transition()
.attr('y', 0)
.attr('transform', rectTransform)
.attr('height', function (d) { return y.bandwidth(); })
.attr('width', function (d) {
return (x(d.endDate) - x(d.startDate));
});
rect.transition()
.attr('transform', rectTransform)
.attr('height', function (d) { return y.bandwidth(); })
.attr('width', function (d) {
return (x(d.endDate) - x(d.startDate));
});
rect.exit().remove();
svg.select('.x').transition().call(xAxis);
svg.select('.y').transition().call(yAxis);
console.log("TASKS NACH REDRAW: ")
console.log(tasks);
return gantt;
};
gantt.margin = function (value) {
if (!arguments.length)
return margin;
margin = value;
return gantt;
};
gantt.timeDomain = function (value) {
if (!arguments.length)
return [timeDomainStart, timeDomainEnd];
timeDomainStart = value[0], timeDomainEnd = value[1];
return gantt;
};
return gantt;
};
uj5u.com熱心網友回復：
問題出在initTimeDomain方法上。在那里，您正在創建對任務陣列的新參考var tasksOrder = tasks;，然后tasksOrder按日期排序。問題在這里，JavaScript物件和陣列參考，意思是tasksOrder和tasks都指向同一個陣列。put 很簡單，修改一個也會改變另一個。
如果你不想要這個，你需要創建一個真正的副本，像這樣：
var tasksOrder = tasks.slice();
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371159.html
標籤：javascript html 数组 d3.js 甘特图