c3js同步显示相同数据的区域和分段工具提示

Question

我有一个零碎图和一个区域图显示相同的数据。分段显示了该区域的总结数据。现在，如果选择了相应的数据，我想向工具提示/highlight显示另一个图表的数据。

小提琴手：http://jsfiddle.net/gothmogg/m59poqcd/18/

我发现了一个我应该用的暗示

onmouseover: function (d) { 
   chart2.tooltip.show({ x: d.x });
}

作为一个示例，我的代码看起来像(和jsfiddle中的一样)。

​

var columns = ['data1', 'data2', 'data3', 'data4'];
var data = [];
data.push([20, 40, 30, 10, 50]);
data.push([50, 50, 50, 40, 60]);
data.push([10, 40, 60, 25, 30]);
data.push([80, 60, 30, 25, 35]);


var pieChart = c3.generate({
  bindto: d3.select('#pie-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'pie',
    onmouseover: function(d, i) {
      if (areaChart)
        areaChart.tooltip.show({
          x: d.x
        });
    },

  }
});

var areaChart = c3.generate({
  bindto: d3.select('#area-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'area-spline',
    onmouseover: function(d, i) {
      if (pieChart)
        pieChart.tooltip.show({
          x: d.x
        });
    },

  }
});

for (i = 1; i < columns.length; i++) {
  setTimeout(function(column) {
    pieChart.load({
      columns: [
        [columns[column]].concat(data[column]),
      ]
    });
    areaChart.load({
      columns: [
        [columns[column]].concat(data[column]),
      ]
    });
  }, (i * 5000 / columns.length), i);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.js"></script>

<div id="area-chart"></div>
<div id="pie-chart"></div>

​

高亮/工具提示当然不是这样工作的.

除了使用d3手动高亮显示之外，还有其他想法吗？

Answer 1

从逻辑上讲，问题在于饼图是面积图的集合--在它们之间，无法匹配每个图表中数据系列的工具提示。

如果您在饼图中高亮显示了数据系列(切片)，那么您希望在区域图中显示该系列的5个工具提示中的哪一个？如果你的工具翻转了区域图中的一个点，你会认为饼图的默认工具提示会出现--这会显示出蓝色切片的18.9%，而实际上你只选择/查询了其中的一小部分？

与工具提示相比，更好的方法是同步高亮显示，但是当区域图中的点重叠时，也会出现一个问题

http://jsfiddle.net/43ane5jk/1/

var pieChart = c3.generate({
  bindto: d3.select('#pie-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'pie',
    onmouseover: function(d, i) {
      if (areaChart)
        areaChart.focus(d.id);
    },
    onmouseout: function(d, i) {
      if (areaChart)
        areaChart.revert();
    },

  }
});

var areaChart = c3.generate({
  bindto: d3.select('#area-chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    type: 'area-spline',
    onmouseover: function(d, i) {
      if (pieChart)
        pieChart.focus(d.id);
    },
    onmouseout: function(d, i) {
      if (pieChart)
        pieChart.revert();
    },

  }
});