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