Барная диаграмма с видоискателем d3.js

Question

Как обеспечить видоискатель Функциональность в d3.js для штрих-диаграммы. диаграмма с видоискателем выглядит так: http://nvd3.org/ghpages/lineWithFocus.html, и гистограмма, которую я хочу интегрировать в функцию поиска, выглядит так: http://nvd3.org/ghpages/multiBar.html. Кто-нибудь может мне с этим помочь. Я ищу целую неделю и ничего не могу получить.

Answer 1

Ваш поиск не встроен в библиотеку (пока). Лучше всего, чтобы посмотреть на: https://github.com/novus/nvd3/blob/master/src/models/lineWithFocusChart.js

Clone репо и строить свои собственные модели barWithFocusChart.js (я уверен, что они хотели бы запрос нагрузочный:])

Вы можете найти учебник о том, как построить бар полукокса в d3.js: http://mbostock.github.io/d3/tutorial/bar-2.html

И вы можете прочитать на координированных просмотров: http://square.github.io/crossfilter/

Answer 2

на самом деле вы можете, но вы должны сделать это. И это довольно просто!

Загрузите файлы с nvd3.org Возьмите файл "linePlusBarWithFocusChart.html". Мы должны отредактировать это.

Что нужно сделать, чтобы удалить данные для части линии, так что только данные бара существуют.

Ввод данных, как с помощью, например:

var testdata = [{ 
     "key": "Quantity", 
     "bar": true, 
     "values": [ 
      [1136005200000, 1271000.0], 
      [1138683600000, 1271000.0], 
      [1141102800000, 1271000.0], 
      etc. .]  
    }, { 
     "key": "Price",  //Line chart data values are to be deleted. 
     "values": [ 

     ] 
    }] 

И, наконец, чтобы удалить данные оси линейного графика:

chart.y2Axis 
.tickFormat(function(d) { 
    // return '$' + d3.format(',.2f')(d) //what was present in the example 
    return ''; 
}); 

chart.y4Axis 
.tickFormat(function(d) { 
// return '$' + d3.format(',.2f')(d) //what was present in the example 
return ''; 
}); 

Вы можете включить легенды от из file nvd3.js - номер строки: 6871, где определена модель: linePlusBarWithFocusChart.

Положить showLegend = false;

Функция showTooltip в nvd3.js под той же моделью.

var showTooltip = function(e, offsetElement) { 
    if (extent) { 
     e.pointIndex += Math.ceil(extent[0]); 
    } 
    var left = e.pos[0] + (offsetElement.offsetLeft || 0), 
     top = e.pos[1] + (offsetElement.offsetTop || 0), 
     x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)), 
     y = (e.series.bar ? y1Axis : y1Axis).tickFormat()(lines.y()(e.point, e.pointIndex)), 
     content = tooltip(e.series.key, x, y, e, chart); 

    nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement); 
    }; 

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

Не стесняйтесь спрашивать о любых сомнениях.