D3 line graph issue

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> - это то, что определит визуальную окклюзию.