D3折线图问题

Question

我有d3折线图，它会不断用新的数据集进行更新。 问题是我的折线图绘制在一些矩形块上方。 在页面加载时，我的折线图总是在矩形的前面，但是刷新页面后，折线图在矩形块后面。 你们任何人都可以帮助我解决此问题吗？

我的代码是这样设置的

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或“最重要的是什么？” 指示符。

诀窍通常是在最上面绘制要查看的项目。 但是，这并不总是很方便。 例如，您可能无法在每次重画块时都重画线。

即使重新绘制对象，也可以保留对象的视觉顺序，即将它们放在<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>容器的顺序将决定视觉遮挡。