d3.js - c3 散点图 - 我如何给一个点命名？

Question

在 c3 散点图上，我可以给每个点一个 x 和 y 值，但我还需要给它们一个名称。

我正在传递看起来像这样的 json 数据：

[
  {
   name: 'Some Name 1',
   x: 209,
   y: 50
 }
 {
   name: 'Some Name 2',
   x: 100,
   y: 86
  }
]

有没有办法在鼠标悬停时获取点的名称？我正在寻找一种方法来解释两个点具有相同 x 和 y 值的可能性。

Answer 1

所以如果你有这样的事情：

svg.selectAll("circle")
  .data(array)
  .enter().append("circle")
  .attr("x",function(d){return d.x;})
  .attr("y",function(d){return d.y;});

你会添加这样的东西：

.attr("title",function(d){return d.name;});

要得到：

svg.selectAll("circle")
  .data(array)
  .enter().append("circle")
  .attr("x",function(d){return d.x;})
  .attr("y",function(d){return d.y;})
  .attr("title",function(d){return d.name;});

如果您的数据集有很多重叠值。我会将“名称：”元素更改为数组。然后将任何重叠点组合成一个对象。所以：

[
  {
   name: ['Some Name 1'],
   x: 209,
   y: 50
 },
 {
   name: ['Some Name 2'],
   x: 209,
   y: 50
  }
]

会成为：

[
  {
   name: ['Some Name 1','Some Name 2'],
   x: 209,
   y: 50
  }
]

您的 d3 代码将变为：

svg.selectAll("circle")
      .data(array)
      .enter().append("circle")
      .attr("x",function(d){return d.x;})
      .attr("y",function(d){return d.y;})
      .attr("title",function(d){
          var title = "";    
          title = title + d[0];          
          for(var i = 1; i < d.length; i++){
              title = title + ", " + d[i];              
          }
          return title;
       });