javascript - 如何将子任务输出到图表 d3.js？

Question

有一个对象数组。对象就是任务。每个对象都有一个嵌套对象数组。嵌套对象是子任务。

在 Controller 中

[HttpGet]
    public async Task<IActionResult> Gantt()
    {
        var applicationContext = await _context.GisTask
            .Include(g => g.StatusTask).Where(g => g.StatusTask.Name == "В работе")
            .Include(g => g.Category)
            .Include(g => g.Customer)
            .Include(g => g.User)
            .Include(g => g.ControleUser)
            .Include(g => g.GisComments)
            .Include(g => g.SecondTasks)
            .OrderBy(g => g.EndDateTime)
            .ToListAsync();
        //JsonConvert.SerializeObject((from a in db.Events where a.Active select a).ToList(), Formatting.Indented,new JsonSerializerSettings()
        //{
        //    ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
        //}
        return View(applicationContext);
    }

在 View 中

var datagantt = @Html.Raw(Json.Serialize(Model));
console.log(datagantt);

var height = 500,
    width = 1200,
    margin = 30; // отступ
var offset = 50; // смещение между значениями на осях
// добавляем к оси отступы слева и справа
var xAxisLength = width - 2 * margin;
var yAxisLength = height - 2 * margin;
var svg; //объект svg, который будет содержать визуализацию
var createTimeDataMassiv = [];
var endTimeDataMassiv = [];

datagantt.forEach(function (d) {
    createTimeDataMassiv.push(d.createDateTime);
    endTimeDataMassiv.push(d.endDateTime);
});

var svg = d3.select("div.gantt").append("svg")
    .attr("class", "axis")
    .attr("class", "axis")
    .attr("width", width)
    .attr("height", height);


var scaleX = d3.scaleTime()
    .domain([new Date(d3.min(d3.values(createTimeDataMassiv))), new Date(d3.max(d3.values(endTimeDataMassiv)))])
    .range([0, xAxisLength])
    .nice();

var scaleY = d3.scaleBand()
    .rangeRound([0, yAxisLength])
    .domain(datagantt.map(function (d) { return d.name; }));

// создание осей
var xAxis = d3.axisBottom()
    .scale(scaleX)
    .tickFormat(d3.timeFormat('%d.%m'))
    .ticks(22);

var yAxis = d3.axisLeft()
    .scale(scaleY);
// добавляем элемент с осями на страницу
svg.append("g")
    .attr("class", "x-axis")
    .attr("transform",  // сдвиг оси вниз и вправо
    "translate(" + margin + "," + (height - margin) + ")")
    .call(xAxis);

d3.selectAll("g.x-axis g.tick")
    .append("line") // добавляем линию
    .classed("grid-line", true) // добавляем класс
    .attr("x1", 0)
    .attr("y1", 0)
    .attr("x2", 0)
    .attr("y2", - (height - 2 * margin));  

var g = svg.append("g")
    .attr("class", "body")
    .attr("transform",  // сдвиг объекта вправо
    "translate(" + margin + "," + margin*2 + ")");

g.selectAll("rect.bar")
    .data(datagantt)
    .enter()
    .append("rect")
    .attr("class", "bar");

g.selectAll("rect.bar")
    .data(datagantt)
    .attr("x", function (d) {
        return scaleX(new Date(d.createDateTime));
    })
    .attr("y", function (d) {
        return scaleY(d.name);
    })
    .attr("height", function (d) {
        return 14;
    })
    .attr('width', 0) // Исходная ширина элемента до начала анимации
    .transition()
    .duration(1000)
    .attr("width", function (d) {
        return scaleX(new Date(d.endDateTime)) - scaleX(new Date(d.createDateTime));
    })
    .text(function (d) {
        return d.name;
    });

如何将子任务输出到图表 d3.js？要求在每个任务下显示子任务。对我来说，它只能推断出任务。

Answer 1

问题已经解决了。以前，我有一个包含其他对象的对象数组。我将所有子任务与新数组中的任务置于同一级别。我以这样一种方式创建了一个公共(public)数组，即每个任务之后都有其子任务。此外，在周期执行期间，子任务按结束日期排序。

var datagantt = @Html.Raw(Json.Serialize(Model));

var second = [];

datagantt.forEach(function (item) {
    second.push(item);
    item.secondTasks
        .sort(function (a, b) {
            if (a.endDateTime == b.endDateTime)
                return 0;
            if (a.endDateTime < b.endDateTime)
                return -1;
            else
                return 1; 
        })
        .forEach(function (d) {
        second.push(d);
    })
});

原来如此[{0 任务}、{1 任务}、{2 任务}、{3 任务:子任务[{0 子任务}{1 子任务}{3 子任务}]}]

变成了[{0任务}、{1任务}、{2任务}、{3任务}、{3任务中的0子任务}、{3任务中的1子任务}、{3任务中的3子任务} , {4 个任务}, {4 个任务中的 0 个子任务}, {4 个任务中的 1 个子任务}]

The result