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

Question

我尝试使用xCharts为某些数据点添加文本标签。对于每个具有＆＃34;名称＆＃34;物业我想要一个标签附近的标签＆＃34; name＆＃34;作为文本的价值。这张照片展示了我想要的东西：

这是数据集：

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。