Блог

Главная - Вопросы по программированию - Отображение всех данных области с накоплением во всплывающем окне при наведении курсора мыши в d3.js

Отображение всех данных области с накоплением во всплывающем окне при наведении курсора мыши в d3.js

#javascript #d3.js

#javascript #d3.js

Вопрос:

Я хочу показать данные области с накоплением при наведении курсора мыши так, как это реализовано в примере nvd3: http://nvd3.org/examples/stackedArea.html но в чистом d3. В настоящее время я отображаю всплывающее окно и вертикальную линию при наведении курсора мыши на событие, но не смог отобразить все данные для стеков во всплывающем окне. Ниже приведен Coffescript.

 verticalLine = svg.append('line')
  .attr({
    'x1': 0,
    'y1': 0,
    'x2': 0,
    'y2': height
  })
  .attr("stroke", "steelblue")
  .attr('class', 'verticalLine')

svg.on "mousemove", () ->
  xPos = d3.mouse(this)[0]
  svg.select(".verticalLine").attr("transform", () ->
    "translate("   xPos   ",0)")

tooltip.transition()
  .duration(200)
  .style("font-size", "12px")
  .style("opacity", .9)
tooltip.html("Info")
  .style("left", (d3.event.pageX   5)   "px")
  .style("top", (d3.event.pageY - 28)   "px")

svg.on "mouseout", () ->
  tooltip.transition()
    .duration(500)
    .style "opacity", 0

Вот моя скрипка

Комментарии:

1. Вы посмотрели на исходный код NVD3?

2. Да, ссылка на фрагмент мне мало что сказала.

3. Они используют функцию interactiveBisect для определения положения точек (пересечений), но это кажется слишком сложным для моего простого примера.

4. В конце концов я решил проблему.

5. @OsmanMazinov: Не могли бы вы рассказать, как вы решили эту проблему. Я также застрял в этой же проблеме.

Ответ №1:

Похоже, не только я боролся с проблемой, поэтому я публикую свое решение ниже. Идея состоит в том, чтобы получить пересечение вертикальной линии с осью x, т. Е. Найти целевую дату, которая затем позволит нам захватить все другие поля, связанные с этой датой. Я использовал d3.bissector, чтобы найти индекс целевой даты.

 xPos = d3.mouse(this)[0]
bisectDate = d3.bisector((d) -> d.date).left
date = x.invert(xPos)
currentDateIndex = bisectDate(browsers[0].values, date)

Рабочий код здесь https://jsfiddle.net/ovvn/t44qovhg /