d3JS: Взаимодействие с вложенным массивом

В качестве продолжения до this question мне удалось создать линейку из нескольких серий из вложенных массивов. Теперь я пытаюсь добавить всплывающие подсказки к диаграмме, аналогичной диаграмме на this post by Mike Bostock.d3JS: Взаимодействие с вложенным массивом

Это означает, что мне нужно выяснить метод деактивации вложенного массива и затем выбрать эти значения для всплывающей подсказки. Как перенести строки кода ниже на вложенный массив?

bisectDate = d3.bisector(function(d) { return d.date; }).left,

Далее в сценарий:

i = bisectDate(data, x0, 1), 
    d0 = data[i - 1], 
    d1 = data[i],

Спасибо за любую помощь, вот пример JS Скрипки, который я хотел бы использовать для создания всплывающих подсказок: http://jsfiddle.net/JYS8n/2/

источник

2014-01-14 ekatz

Для выбора позиции на линии вам понадобится вложенная делянка - внешняя, чтобы выбрать линию (используя значение y) и внутреннюю позицию (используя значение x). Не могли бы вы разместить полный код, где вы пытаетесь это сделать, желательно в jsfiddle? –

Ларс, код, с которым я работаю, слишком тяжелый, чтобы опубликовать и изолировать мой вопрос. Вот многострочная линейная диаграмма JS Fiddle (любезно предоставлена @ musically_ut): http://jsfiddle.net/JYS8n/2/. Я хотел бы добавить всплывающие подсказки в диаграмму, используя функцию bisect. – ekatz

Вы должны использовать bisect дважды здесь, сначала для поиска подходящего x значения, а затем найти подходящее y значение. Во-первых, вам нужно будет определить второй пользовательский биссектр, учитывающий значение.

var bisectValue = d3.bisector(function(d) { return d.Value; }).left;

Первая часть обработчика не сильно изменилась из не-вложенной версии. Единственное различие заключается в том, что вместо рассмотрения только одного ряда данных мы повторяем их все и собираем ближайшую точку данных для каждого.

var x0 = x.invert(d3.mouse(this)[0]), 
    ds = data.map(function(e) { 
     var i = bisectDate(e.Data, x0, 1), 
      d0 = e.Data[i - 1], 
      d1 = e.Data[i]; 
     return x0 - d0.Date > d1.Date - x0 ? d1 : d0; 
    });

Теперь ds список точек данных, ближайший один к позиции курсора для каждой серии. Все, что еще предстоит сделать, это снова делить пополам, чтобы найти ту, которая находится ближе всего к текущей позиции курсора.

var y0 = y.invert(d3.mouse(this)[1]), 
    i = bisectValue(ds.sort(), y0, 1), 
    d0 = ds[i - 1], 
    d1 = ds[i], 
    d = y0 - d0.Value > d1.Value - y0 ? d1 : d0;

Основной скелет такой же, как и раньше, только на этот раз мы сравниваем y и .Value. Теперь d - это точка данных, которую нужно выделить.

focus.attr("transform", "translate(" + x(d.Date) + "," + y(d.Value) + ")"); 
focus.select("text").text(d.Value);

Полный пример here. Я также изменил интерполяцию строк - в то время как это делает ее более привлекательной, линия больше не проходит через фактические точки.

источник

2014-01-14 20:23:03

Спасибо за помощь! – ekatz

d3JS: Взаимодействие с вложенным массивом

ответ

Смежные вопросы