С3 точечный график - как я могу дать точке название?

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