向工具提示添加标签或文本

Question

当悬停在 C3 中的数据点上时，我正在尝试添加标签或更多 text/data（与 x、y 坐标无关）

我不确定 c3 是否可以实现这样的功能

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>

  <script type="text/javascript">
    onReady('#chart', function() {
      var chart = c3.generate({
        data: {
          x: 'x',
          //        xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
          columns: [
            ['x', '2014-01-01', '2014-01-02', '2014-01-03', '2014-01-04', '2014-01-05', '2014-01-06'],
            //            ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 340, 200, 500, 250, 350],
            ['data3', 70, 220, -200, 100, 600, 512]
          ],
          types: {
            data1: 'line',
            data2: 'line',
            data3: 'bar'
          },
          labels: {
            format: {
              data1: d3.format()
            }

          }

        },
        grid: {
          x: {
            show: false
          },
          y: {
            lines: [{
              value: 0
            }, {
              color: 'red'
            }]
          }
        },
        axis: {
          x: {
            type: 'timeseries',
            tick: {
              format: '%Y-%m-%d'
            }
          }
        }
      });
    });

    // Set a timeout so that we can ensure that the `chart` element is created.
    function onReady(selector, callback) {
      var intervalID = window.setInterval(function() {
        if (document.querySelector(selector) !== undefined) {
          window.clearInterval(intervalID);
          callback.call(this);
        }
      }, 500);
    }
  </script>
</head>

<body>
  <div id="chart"></div>
</body>

</html>

我希望得到相同的图表，但带有任一标签（'A'、'B'、'C'、'D'、'E'、'F') 作为悬停工具提示内的附加文本，或作为点旁边的标签。

提前致谢。

Answer 1

 "tooltip": {
        'contents': function () {
            return "<div>Test</div>";
        }
    },

为了将来参考，我结束了这个解决方案，我还没有美化 html 以获得我想要的东西。

也可以将 .d3 包含到 css 中，如下所示：

d3-tip {
  line-height: 
  background-color: 
  font-weight: 
  padding: 10px 10px;
  background: rgba(#,#,#,#); 
  color: magenta;
  border-radius: 2px;
  border: 2px solid;
}

向工具提示添加标签或文本

Add labels or text to tooltip

javascript

html

d3.js

c3.js