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：”元素更改为数组。然后将任何重叠点组合到一个对象中。 所以：

[ 
    { 
    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; 
     });