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对象被其他人视觉遮挡（隐藏）（例如，通过rects，反之亦然）非常依赖于他们的绘制顺序。与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>容器的排序将决定视觉遮挡。

D3折线图问题

1 个答案: