Question

我正在使用D3js创建甘特图。基本图表工作正常，现在我要进行一些动态更改。我想开发可以更改任务队列的功能。到目前为止，我已经发展起来...

`
var tasks = [
        {"startDate":new Date("01/01/2019"),"endDate":new Date("02/15/2019"),"taskName":"Team E","status":"RUNNING"},
        {"startDate":new Date("03/01/2019"),"endDate":new Date("04/15/2019"),"taskName":"Team D","status":"RUNNING"},
        {"startDate":new Date("05/01/2019"),"endDate":new Date("06/15/2019"),"taskName":"Team F","status":"RUNNING"},
        {"startDate":new Date("11/01/2019"),"endDate":new Date("12/15/2019"),"taskName":"Team A","status":"RUNNING"}
        ]


var taskStatus = {
    "SUCCEEDED" : "bar",
    "FAILED" : "bar-failed",
    "RUNNING" : "bar-running",
    "KILLED" : "bar-killed"
};

var taskNames = [ "Team A", "Team B", "Team C", "Team D", "Team E", "Team F" ];

var format = "%m:%Y";

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format);
gantt(tasks);



function addTask() {

    tasks.push({
    "startDate" : new Date("04/01/2019"),
    "endDate" : new Date("05/01/2019"),
    "taskName" : "Team C",
    "status" : "RUNNING"
    });


    gantt.redraw(tasks);
    dragHandler(svg.selectAll("rect"));
};

var deltaX, deltaY;

var dragHandler = d3.drag()
    .on("start", function () {
        var current = d3.select(this);
        deltaX = current.attr("x") - d3.event.x;
        deltaY = current.attr("y") - d3.event.y;
    })
    .on("drag", function () {
        d3.select(this)
            .attr("x", d3.event.x + deltaX)
            .attr("y", d3.event.y + deltaY);
    })
    .on("end",function(){
    console.log(d3.select(document.elementFromPoint(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY)).attr("class"));
    })

    ;

var svg = d3.select("svg");
dragHandler(svg.selectAll("rect"));

` 现在，我可以使用它来拖放任务，现在的问题是，

如何根据放置任务的当前任务名称更改任务条目。例如。如果我将下面的任务拖到C团队的前面。

{"startDate":new Date("01/01/2019"),"endDate":new Date("02/15/2019"),"taskName":"Team E","status":"RUNNING"},

那么上面的条目应该属于C组。我如何实现这一目标。

在完成第一个任务后，下一个查询是，当我将E团队的任务放到C团队时，日期范围也应根据放置位置进行更新，如果C团队在该位置已经有另一个任务，则应该获得转移了。在短期任务中，彼此应该相对。

我不知道我是否能够正确解释我的问题，但我的困惑是我想在将任务rect拖放到图表中时更改json数据。

请指导我如何实现这一目标。

D3动态数据随着图表的变化而更新

0 个答案: