Question

我尝试在d3中添加嵌套选择（rects中的行）。 DOM元素在检查器中可见，但不会显示在可视化文件中。我的代码看起来像这样：

var rects = itemRects.selectAll("rect")
    .data(scope.items)
    .attr("x", function(d) {return x1(d.timeline.processStarts);})
    .attr("width", function(d) {return x1(d.timeline.processEnds) - x1(d.timeline.processStarts);});

var rectsContent = rects.enter().append("rect")
    .attr("class", "item")
    .style("fill", function(d) { return d.cycleColor; })
    .attr("x", function(d) {return x1(d.timeOne);})
    .attr("y", function(d) {return y1(d.lane) + .1 * y1(1) + 0.5;})
    .attr("width", function(d) {return x1(d.timeTwo) - x1(d.timeline.processStarts);})
    .attr("height", function(d) {return .8 * y1(1);});

rects.exit().remove();

现在我想在我的rects中添加嵌套行：

var strokes = rectsContent.append("g").selectAll("line")
    .data(function(d) { return d.timestamps; })
    //.attr("d", function(d) { return d; })
    .attr("x1", function(d) { return x1(d3.values(d)[0]);})
    .attr("x2", function(d) { return x1(d3.values(d)[0]);});

strokes
    .enter().append("line")
    .attr("class","line")
    .style("stroke", "white")
    .attr("x1", function(d) { console.log(d3.values(d)[0]); return x1(d3.values(d)[0]);}) // I get the right data!
    .attr("x2", function(d) { return x1(d3.values(d)[0]);})
    .attr("y1", function(d, i, j) { return y1(scope.items[j].lane); })
    .attr("y2", function(d, i, j) { return y1(scope.items[j].lane) + mainLaneHeight; });

strokes.exit().remove();

正如我所说，这些行在DOM检查器中可见，但在应用程序中不可见。当我不嵌套数据并使用平行于rects的行时，它可以工作（但我只能显示第一个元素，因为没有嵌套）：

var strokes = itemRects.append("g").selectAll("line")
    .data(scope.items[0].timestamps)
    //.attr("d", function(d) { return d; })
    .attr("x1", function(d) { return x1(d3.values(d)[0]);})
    ....

嵌套有什么问题？是因为我在rects上输入（）并且必须等到我可以追加子行吗？

编辑：

当我尝试将我的rects追加到group元素时，不显示rects。在DOM检查器中，它们也不会出现。

var g = itemRects.selectAll("g")
    .data(scope.items).enter().append("g");

var rects = g.selectAll("rect")
    .data(function(d) { return d; })
    .attr("x", function(d) {return x1(d.start);})
    .attr("width", function(d) {return x1(d.end) - x1(d.start);});

var rectsContent = rects.enter().append("rect")
    .attr("class", "item")
    .style("fill", function(d) { return d.color; })
    .attr("x", function(d) {return console.log(d); x1(d.start);}) // does not get triggered
    .attr("y", function(d) {return y1(d.lane) + .1 * y1(1) + 0.5;})
    .attr("width", function(d) {return x1(d.end) - x1(d.start);})
    .attr("height", function(d) {return .8 * y1(1);});

rects.exit().remove();

D3：嵌套元素在Dom中不可见

0 个答案: