Question

我已经使用d3一段时间了，而且我一直在维护我创建的热图，因为我找不到一个可以完成我需要的一切的程序包。我最近一直在使用它的拖动功能，但是由于我以前在加载后不需要更新它，所以我没有打扰。但是，由于我现在需要非常频繁地进行更新，因此我一直使用的方法（重绘热图）现在不起作用。我一直在尝试通过enter / exit方法进行更新，但似乎无法使其正常工作。任何帮助或指示，将不胜感激，

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);
}

};

现在这只是一个正在进行的测试，因此代码真的很混乱。这是我要测试的代码的更新部分，有趣的是，mouseover函数的确会根据拖动来更改位置，我检查了一下，数据的确也在更新。如果需要更多信息，请告诉我。

更新D3热图的问题

0 个答案: