在c3js中获取该系列的开始和结束位置

时间:2018-02-28 02:38:46

标签: d3.js c3.js

我正在尝试获取系列的起始和最后(x,y cordinates),以便我可以附加到我的图表中。我已经尝试查看onRendered回调,但到目前为止只能获得标签。无法得到系列开始和系列结束的实际x,y坐标(路径的开始和路径的结束)。

我的小提琴:https://jsfiddle.net/sourabhtewari/94tbbyrd/27/

此代码为我提供了标签数据

function onRendered() {
  console.log(this);


 d3.selectAll('.c3-text').each((v) => {
           console.dir(v);
        });

}

1 个答案:

答案 0 :(得分:1)

尝试使用此代码段获取每条路径的第一个/最后一个点:

  var sel = d3.selectAll('.c3-line');
  console.log("sel:", sel);
  sel.each((v, i) => {
    var path = sel[0][i], 
    len = Math.floor( path.getTotalLength() );
    console.log("#:", i);
    console.log("path:", path);
    console.log("nr. points:", len);
    console.log("first point:", path.getPointAtLength(0));
    console.log("last point:", path.getPointAtLength(len-1));
  });

实际上c3-line是与SVG系列路径相关联的类。

检查小提琴已更新:https://jsfiddle.net/beaver71/xzsq4t1z/