如何实时更新C3.js散点图的图例与工具提示名称？解决resize复原问题

我来帮你搞定这个问题——不用直接去改D3的DOM元素，用C3.js自带的API就能完美解决，还能避免调整尺寸后文本恢复初始状态的坑。

1. 初始化时直接自定义系列名称 #

C3提供了data.names配置项，在初始化图表的时候就能把原始的setosa、versicolor替换成你想要的name1、name2，这样图例和工具提示一开始就会显示正确的名称：

var chart = c3.generate({
  bindto: '#chart',
  data: {
    url: '你的数据URL',
    type: 'scatter',
    // 这里配置自定义名称
    names: {
      setosa: 'name1',
      versicolor: 'name2'
    }
  },
  // 其他轴标签、样式等配置...
});

2. 实时动态更新名称 #

如果之后需要动态修改这些名称，用C3的chart.data.names()方法就行，调用这个方法会自动触发图表重绘，图例、tooltip的文本都会同步更新，而且不管怎么调整图表尺寸，都不会恢复成原始文本（因为是修改C3内部的数据源配置，不是临时改DOM）：

// 示例：动态更新名称
chart.data.names({
  setosa: '新的name1',
  versicolor: '新的name2'
});

为什么直接用D3改会失效？ #

你之前遇到的调整尺寸后文本复原的问题，是因为C3在图表重绘（比如窗口 resize、数据更新）时，会重新生成所有相关的DOM元素，之前用D3手动修改的文本会被覆盖掉。而通过C3的API修改，是直接修改了图表的数据源配置，重绘时会基于最新的配置渲染，自然不会出现复原问题。

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css">
</head>
<body>
  <div id="chart"></div>

  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
  <script>
    var chart = c3.generate({
      bindto: '#chart',
      data: {
        url: 'https://raw.githubusercontent.com/c3js/c3/master/data/c3_test.csv',
        type: 'scatter',
        names: {
          setosa: 'name1',
          versicolor: 'name2'
        }
      },
      axis: {
        x: {label: 'Sepal Length'},
        y: {label: 'Petal Length'}
      }
    });

    // 模拟3秒后动态更新名称
    setTimeout(() => {
      chart.data.names({
        setosa: 'Updated Name1',
        versicolor: 'Updated Name2'
      });
    }, 3000);
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者yavg