d3-наконечник не работает на линейной диаграмму

Question

Я пытаюсь добавить всплывающую подсказку к линии диаграмме, сделанную в постоянном, но я получаю сообщение об ошибке по адресу:

var lineTip = d3.tip() 
        .attr('class', 'd3-tip') 
        .offset([-10, 0]) 
        .html(function (d) { return "<span style='color: #f0027f'>" + d.data.key + "</span> : " + numberFormat(d.value); }); 

Ошибки является:

Undefined is not a function 

Я использовал следующие библиотеки. Что я делаю не так? Почему функция не определена?

<g:javascript src="d3.js"/> 
<g:javascript src="dc.js"/> 
<g:javascript src="index.js"/> 
<g:javascript src="jquery-ui-1.10.4.custom.js"/> 
<g:javascript src="jQDateRangeSlider-min.js"/> 
<g:javascript src="jQDateRangeSlider-withRuler-min.js"/> 
<g:javascript src="jQRangeSliderLabel.js"/> 

Примечание index.js, где у меня есть этот код http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js Любая помощь будет высоко ценится

Answer 1

У меня та же проблема, надеюсь, это поможет кому-то там. Я использую dc series graph и d3 tips. Для того, чтобы использовать d3tips, сначала мы должны создать d3tip:

var pieTip = d3.tip() 
      .attr('class', 'd3-tip') 
      .offset([-10, 0]) 
      .html(function (d) { console.log(d); return "<span style='color: #f0027f'>" + "testkey" + "</span> : " + "value"; }); 

Убедитесь, что вы делаете это после того, как граф уже оказаны. Затем вы должны использовать d3 для выбора элементов для привязки d3tip. Поскольку вы создаете граф с dc, что вы выбираете? Если вы выберете неправильные элементы, обратный вызов в вашем методе .html получит неопределенное значение.

После проб и ошибок я обнаружил, что вам нужно выбрать элемент g, который является родительским элементом данных. Данные должны иметь атрибут d с данными. Вы можете найти элемент, щелкнув правой кнопкой мыши по графику (строка или серия или временная шкала) и проверив этот элемент. Вы можете перейти к чему-то вроде этого:

Как вы можете видеть, элемент, который является родителем элемента с атрибутом d является то, что нам нужно. Теперь, когда мы знаем, что это элемент, мы хотим, мы можем закончить это связывание нашего d3tip к правильному элементу:

d3.selectAll("g.stack").call(pieTip); 
d3.selectAll("g.stack").on('mouseover', pieTip.show) 
    .on('mouseout', pieTip.hide); 

Удачи!

Answer 2

Как Гордон говорит, что это, вероятно, проблема отладки. Найдите функцию, которая не определена, посмотрев на консоль в вашем отладчике, затем найдите, где эта функция должна быть определена и работать оттуда, я бы выбрал некоторые функции console.log() для проверки ваших данных.

Но в вопросе подсказки D3 здесь приведена ссылка на пошаговое руководство по добавлению всплывающих подсказок к визуализации d3. Это часть большого набора пошаговых инструкций и примеров, которые являются бесплатными или пожертвованиями.

http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

Good Luck!

А вот некоторая помощь с помощью консоли: https://developer.chrome.com/devtools/docs/console