避免重新绘制图表，D3

Question

第一次安装组件时，我正在使用 React 中的 NVD3 库绘制散点图。我根据单击的按钮隐藏和显示组件。每次出现组件时，它都会被安装，所以它会被重新绘制，但我想避免重新绘制，对图表进行某种缓存，因为绘制包含许多数据点的图表需要相当多的时间。我在 componentDidMount:

中调用 createScatterChart

createScatterChart() {
  const node = this.node
  nv.utils.symbolMap.set('thin-x', function(size) {
    size = Math.sqrt(size);
    return 'M' + (-size/2) + ',' + (-size/2) +
            'l' + size + ',' + size +
            'm0,' + -(size) +
            'l' + (-size) + ',' + size;
  });
// create the chart
  var chart;
  nv.addGraph(function() {
    chart = nv.models.scatterChart()
        .showDistX(true)
        .showDistY(true)
        .useVoronoi(true)
        .color(d3.scale.category10().range())
        .duration(300)
    ;
    var data_func = () => this.props.datum;
    var data_obj = data_func();
    var that = this;
    chart.tooltip.contentGenerator(function (d) {
      //var html = "<div>";
      var html = "";
      d.series.forEach(function(elem){
        Object.keys(data_obj).forEach(function(key_1) {
          var outer_obj = data_obj[key_1];
          if (outer_obj["key"] === elem.key) {
              that.showBarChart(elem.key);
              html += "<p>cluster " + elem.key + "</p>";
              /*var expr = outer_obj["values"][0]["expr"];
              html += "<p>" + elem.key + "</p>";
              html += "<p>x = " + d.value + ", y = " + elem.value + "</p>";*/
          }
        });
      })
      //html += "</div>";
      return html;
    });

    chart.dispatch.on('renderEnd', function(){
        console.log('render complete');
    });

    chart.xAxis.tickFormat(d3.format('.02f'));
    chart.yAxis.tickFormat(d3.format('.02f'));

    d3.select(node)
        .datum(data_func)
        .call(chart);

    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
    return chart;
}.bind(this));
}

函数最终 returns chart，那么我能否以某种方式将它保存在一个变量中，然后更快地绘制它？或者对于此类图表缓存，您有什么建议？

Answer 1

可以通过更改 html 元素的 visible 属性而不是渲染它来解决该问题。

<div visibility={this.state.showButton ? "visible": "hidden"} ></div>

避免重新绘制图表，D3

Avoid rendrawing chart, D3

javascript

reactjs

d3.js

charts

nvd3.js