C3.js散点图 - 如何将第三个数据(附加值)关联为原始列数据的一部分，以便回调设置半径并显示在工具提示中

Question

我正在使用C3.js来显示散点图。我有服务器响应数据作为

{"data":[{"point":"x":47.44244604316546762589928057553957,"y":192435.7032514613309352517985611511},"volume":278},"point":"x":48.02666666666666666666666666666667,"y":203699.56703125},"volume":300},"point":"x":47.34313725490196078431372549019608,"y":189978.6420419730392156862745098039},"volume":306},"point":"x":46.11003236245954692556634304207120,"y":200044.0157766990291262135922330097},"volume":309},"point":"x":47.81107491856677524429967426710098,"y":197468.1842935667752442996742671010},"volume":307} ]}

使用上述数据，我生成了 C3ChartOptions 数据选项作为

"data": {
    "xs": {
      "y1": "x0"
    },
    "columns": [
      [
        "x0",
        47.442446043165,
        48.026666666667,
        47.343137254902,
        46.11003236246,
        47.811074918567
      ],
      [
        "y1",
        192435.70325146,
        203699.56703125,
        189978.64204197,
        200044.0157767,
        197468.18429357
      ]
    ],
    "type": "scatter",
    "axes": {
      "y1": "y"
    }
  }

并在单独的变量中分配权重数据，例如 var volume= [278,300,306,309,307];

为了根据体积数据设置圆的半径，我在下面做了

point: {
      r: function(d) {
        return volume[d.index] * 0.04;
      }
    }

为了将体积数据显示为工具提示的一部分，我在下面做了

tooltip :{
  contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
  var text = "<table class='c3-tooltip'>";
text += "<tr class='c3-tooltip-name'><td class='name'><span style='background-color:#ff7f0e'></span>Age</td><td class='value'>" + d[0].x + "</td></tr>"
text += "<tr class='c3-tooltip-name'><td class='name'><span style='background-color:#ff7f0e'></span>"+d[0].name+"</td><td class='value'>" + d[0].value + "</td></tr>"
text += "<tr class='c3-tooltip-name'><td class='name'><span style='background-color:#ff7f0e'></span>Weight</td><td class='value'>" + volume[d[0].index] + "</td></tr>"
text += "</table>";
return text;
};

在上述两种情况下，我在半径函数和工具提示中都得到了不正确的体积数据(错误的索引(。

上述策略有什么问题？如果不是正确的方法，我通常如何将第三个数据集映射到原始列数据以进行回调，以便我可以在半径和工具提示函数中检索它，而不是单独使用它并使用不正确的索引(d.index(引用它

Answer 1

我通过使用上面提到的相同过程解决了这个问题，即单独保存卷数据数组，并尝试在我的回调中使用索引 (d.index( 访问它以设置半径并显示在工具提示中。

为了解决不正确的索引访问问题，我们需要为数据设置其他选项，如下所示

data: {
  xSort: false,
  .
  .
  . //other options
}

这将告诉 C3 不要对给定数据进行排序，以便您可以访问具有相同索引的其他数据。

作为参考，https://github.com/c3js/c3/issues/547#issuecomment-56292971。感谢@masayuki0812的解决方案。但无论如何，它应该在库本身内处理。此外，目前还没有关于 data.xSort 选项的文档 http://c3js.org/reference.html#data-xSort