javascript - D3折线图问题

Question

我有 d3 折线图，它不断更新新的数据集。问题是我的折线图是在一些矩形 block 上方绘制的。在页面加载时，我的折线图始终位于矩形的前面，但刷新页面后，折线图将位于矩形 block 的后面。你们谁能帮我解决这个问题吗？

我的代码是这样设置的

function drawRect(SVG, cData, type) {
            let selector = '.ca';
            let className = 'c a';
            let tcHeight = verticalSize + MIN_CELL_PADDING;
            let getTranslateString = function (index) {
            let yVal = columnHeight - ((index + 1) * tcHeight);
            return `translate(${xVal}, ${yVal})`;
            let rects = d3.select(columnSVG)
                .selectAll(selector)
                .data(cData.filter((d) => {
                    return d;
                }));
            rects.enter()
                .append('g')
                .attr('class', className)
                .attr('transform', (d, ix) => {
                return getTranslateString(ix);
                })
                .each(function () {
                    d3.select(this)
                        .append('rect')
                        .attr('width', cellSize)
                        .attr('height', verticalSize)
                        .attr('rx', 4)
                        .attr('ry', 4)
                        .attr('time', (d) => {
                            return cData.date;
                        })
                        .attr('fill', (d) => {
                            return changeColor(d);
                        });
                });

            rects.transition()
                .attr('transform', (d, ix) => {
                    return getTranslateString(ix);
                });

            rects.each(function (d) {
                let node = d3.select(this);
                node.selectAll('rects').transition()
                    .attr('width', cellSize)
                    .attr('height', verticalSize)
                    .attr('rx', 4)
                    .attr('ry', 4)
        }

    function drawOline(aData, dData, time) {
                let aLine = d3.svg.line()
                    .defined((d) => {
                        return !isNaN(d.Ptile);
                    })
                    .x((d) => {
                        return ptime(moment(d.day).utc());
                    })
                    .y((d) => {
                        return aY(d.Ptile);
                    });

                let dLine = d3.svg.line()
                    .defined((d) => {
                        return !isNaN(d.Ptile);
                    })
                    .x((d) => {
                        return ptime(moment(d.day).utc());
                    })
                    .y((d) => {
                        return dY(d.Ptile);
                    });

                if (aData && aData.length > 0) {
                    if (g.select('.aline')[0][0] == null) {
                        g.append('g')
                            .append('path')
                            .datum(aData)
                            .attr('class', 'line aline')
                            .attr('fill-opacity', 1.0)
                            .attr('d', aline);
                    } else {
                        g.select('.aline')
                            .datum(aData)
                            .transition()
                            .attr('fill-opacity', 1.0)
                            .attr('d', aline);
                    }
                } else {
                    g.select('.aline')
                        .transition()
                        .attr('fill-opacity', 1.0)
                        .attr('d', aline);
                }

                if (dData && dData.length > 0) {
                    if (g.select('.dline')[0][0] == null) {
                        g.append('g')
                            .append('path')
                            .datum(dData)
                            .attr('class', 'line dline')
                            .attr('fill-opacity', 1.0)
                            .attr('d', dline);
                    } else {
                        g.select('.dline')
                            .datum(dData)
                            .transition()
                            .attr('fill-opacity', 1.0)
                            .attr('d', dline);
                    }
                } else {
                    g.select('.dline')
                        .transition()
                        .attr('fill-opacity', 1.0)
                        .attr('d', dline);
                }
            }

Answer 1

某些 SVG 对象被其他对象遮挡(隐藏)(例如，直线被矩形遮挡，反之亦然)非常依赖于它们的绘制顺序。与 HTML/CSS 不同，SVG 没有真正的 z-index或“上面有什么？”指标。

诀窍通常是把你想在最后看到的项目画出来。然而，这并不总是很方便。例如，您可能无法在每次重绘 block 时都重绘线条。

即使在重新绘制对象时，保留对象视觉顺序的一种方法是将它们放入 <g> 中。组。即使项目已更新，组的顺序也无需更改。例如:

var rectsG = svg.append('g').attr('class', 'rects');
var linesG = svg.append('g').attr('class', 'lines');

然后不是绘制到全局 svg元素，将您的附加内容定向到各个组。它们将充当层:

linesG.append('line')
      ...more here...
rectsG.append('rect')
      ...more here...

因为文档中的组是从上到下排序的，所以绘制或重画其组成元素的顺序并不重要。 <g> 的排序容器将决定视觉遮挡。