Проблема с обновлением d3 heatmap - PullRequest
Новая
       20

Проблема с обновлением d3 heatmap

0 голосов
/ 21 марта 2019

Я работаю с d3 уже некоторое время и поддерживаю созданную мной тепловую карту, так как не смог найти пакет, который выполнил бы все, что мне нужно, на реагирование.Недавно я использовал его с функцией перетаскивания, но, поскольку мне не нужно было обновлять его после загрузки, я не стал беспокоиться.Однако, так как мне нужно обновлять очень часто сейчас, метод, который я использовал (перерисовка тепловой карты), сейчас не работает.Я пытался обновить через метод ввода / вывода, но я не могу заставить его работать должным образом.Буду признателен за любую помощь или направление, 

const columnValues = column.map(columnHeader => columnHeader.name);
xScale = d3
  .scaleBand()
  .range([0, columnValues.length * barWidth])
  .domain(columnValues);
const svgUpdate = svg
  .selectAll(`.heatmapcells`)
  .selectAll('rect')
  .data(data);
svgUpdate.exit().remove();
svgUpdate
  .attr('x', d => d.column * barWidth)
  .attr('y', d => d.row * barHeight);

svgUpdate
  .enter()
  .append('rect')
  .attr('class', 'cell')
  .attr('x', d => d.column * barWidth)
  .attr('y', d => d.row * barHeight)
  .style('fill', colorScale)
  .style('outline-color', 'white')
  .style('outline-width', '1px')
  .style('outline-style', 'solid')
  .style('outline-offset', '-1px')
  .attr('width', barWidth)
  .attr('height', barHeight)
  .on('mouseover', function(d) { // eslint-disable-line
    // Create tooltip based on inputed data at mouse location
    const rowValue = row[d.row].name;
    let tHtml = null;
    if (typeof tooltips === 'function') {
      tHtml = ReactDOMServer.renderToStaticMarkup(tooltips(d));
    } else if (rowValue in tooltips && tooltips[rowValue][d.column]) {
      tHtml = ReactDOMServer.renderToStaticMarkup(
        tooltips[rowValue][d.column],
      );
    }
    if (tHtml) {
      d3.select(this).style('outline-color', 'gray');
      d3
        .select(`.${styles.tooltip}`)
        .html(tHtml)
        .style('display', 'inline-block')
        .style('left', `${d3.event.clientX + 50}px`)
        .style('top', `${d3.event.clientY - 20}px`);
    }
  })
  .on('mouseout', function(d) { // eslint-disable-line
    // Hide tooltip
    d3.select(this).style('outline-color', 'white');
    d3.select(`.${styles.tooltip}`).style('display', 'none');
  });
if (!lockXAxis) {
  svg
    .selectAll(`.${styles.xAxis}`)
    .attr('transform', `translate(0,-${barWidth / 2})`)
    .call(d3.axisTop(xScale))
    .selectAll('text')
    .style('fill', '#337ab7')
    .style('font-weight', d => {
      if (info.targetXPos === d) return 'bold';
      return '';
    })
    .attr('dy', '1em')
    .attr('dx', '.5em')
    .attr('transform', 'rotate(-65)')
    .attr('id', (d, i) => column[i].name || i)
    .on('click', (d, i) => column[i].onClick(d));
  // Give every axis an ID
  svg
    .selectAll(`.${styles.xAxis}`)
    .selectAll('g')
    .style('display', (d, i) => (column[i].hidden ? 'none' : ''))
    .attr('id', (d, i) => column[i].name);
}

};

Сейчас это просто тестирование, поэтому код действительно грязный.Это обновленная часть кода, которую я пытаюсь протестировать, что довольно интересно, функции наведения мыши меняют положение в зависимости от перетаскивания, и я проверил, и данные действительно обновляются.Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

...