数据点作为 xCharts 中的文本标签

Question

我正在尝试使用 xCharts 向某些数据点添加文本标签。对于每个具有 "name" 属性的点，我想要在该点附近使用 "name" 值作为文本的标签。这张图就是我想要的：

这是数据集：

var data = {
  "xScale": "time",
  "yScale": "linear",
  "type": "line",
  "main": [{
    "className": ".pizza",
    "data": [{
      "x": "2012-11-05",
      "y": 1
    }, {
      "x": "2012-11-06",
      "y": 6
    }, {
      "x": "2012-11-07",
      "y": 13,
      "name": "Name 1"
    }, {
      "x": "2012-11-08",
      "y": -3
    }, {
      "x": "2012-11-09",
      "y": -4
    }, {
      "x": "2012-11-10",
      "y": 9,
      "name": "Name 2"
    }, {
      "x": "2012-11-11",
      "y": 6
    }]
  }]
};

据我所知，这种定制在 xCharts 中不受开箱即用的支持，必须使用 d3 完成，我猜测它与 Custom Vis Types 文档中描述的内容类似。但我是 d3 的新手，所以我不知道如何创建有用的东西。

Answer 1

在 d3 之上构建了多少绘图库？

我研究了那里的文档，这是我能想到的最好的：

var lineDot = xChart.getVis('line-dotted');
var myVis = {
  enter: function(self, storage, className, data) {
    lineDot.enter.apply(this, arguments);
    // Do your custom actions here
    self._g.append('g')
      .selectAll('.myText')
      .data(data[0].data)
      .enter()
      .append('text')
      .attr('x', function(d,i){
        return self.xScale(d.x);
      })
      .attr('y', function(d,i){
        return self.yScale(d.y);
      })
      .text(function(d,i){
        return d.name;
      })
  },
  update: function(self, storage, timing) {
    lineDot.update.apply(this, arguments);
    // Do your custom actions here
  },
  exit: function(self, storage, timing) {
    lineDot.exit.apply(this, arguments);
    // Do your custom actions here
  },
  destroy: function(self, storage, timing) {
    lineDot.destroy.apply(this, arguments);
    // Do your custom actions here
  },
};
xChart.setVis('myvis', myVis);

注意，我只编码了回车。您可能还应该处理更新案例。

例子here.

数据点作为 xCharts 中的文本标签

Data point as text label in xCharts

d3.js

xcharts