multibarchart - Posición de información sobre herramientas nvd3.js con múltiples gráficos

nvd3 odoo

Question

Estoy usando v1.7.1 de nvd3. Tengo una página en la que represento filas de gráficos con la misma configuración pero diferentes datos. Estoy usando la opción de información sobre herramientas interactiva en el gráfico de líneas múltiples. La información sobre herramientas se está procesando correctamente, pero a medida que se desplaza hacia abajo en la página, al pasar la línea, la información sobre herramientas se muestra en la misma posición en la parte superior de la página. Parece que las primeras filas representan la información sobre herramientas en la posición adecuada, pero a medida que se desplaza hacia abajo, la información sobre herramientas se pierde de vista. He intentado manipular la posición con el tooltipContent (que parece ser la API disponible), pero esto no funciona. Algo como a continuación:

var chartOffset = $(id + '' svg'').offset(),
        x = chartOffset.left,
        y = chartOffset.top;
      //chart.tooltip.position({"top":top,"left":left});
      //chart.interactiveLayer.tooltip.fixedTop(null);
     chart.tooltipContent(function (key, x, y, e) {
        if (e.value >= 0) {
          return ''<h3>'' + key + ''</h3>'' +
            ''<p>'' + y + '' at '' + x + ''</p>'';
        } else {
          return '''';
        }
      });

También probé el estilo de .nvtooltip margin, pero no vi una solución.

La siguiente imagen muestra cómo la punta de la herramienta se ha desconectado mucho de la línea en la que estás haciendo el movimiento

¿Algún indicio de arreglar esto?

Aquí hay opciones completas de gráficos nvd3:

var chart = nv.models.lineChart()
        .height(height)
        .width(width)
        .forceY([0, 1])
        .x(function (d) {
          return new Date(d[0]);
        })
        .y(function (d) {
          return d[1];
        })
        .color(chartcolors)
        .useInteractiveGuideline(true)
        .tooltips(true);

      chart.xAxis
        .axisLabel("")
        .tickFormat(function (d) {
          return d3.time.format(''%x'')(new Date(d))
        });

      chart.yAxis
        .axisLabel(yaxisLabel)
        .tickFormat(d3.format('',.1%''));

      chart.showLegend(true);

      var chartOffset = $(id + '' svg'').offset(),
        x = chartOffset.left,
        y = chartOffset.top;

     chart.tooltipContent(function (key, x, y, e) {
        if (e.value >= 0) {
          return ''<h3>'' + key + ''</h3>'' +
            ''<p>'' + y + '' at '' + x + ''</p>'';
        } else {
          return '''';
        }
      });

Answer 1

Arreglé mi problema cambiando la gravedad predeterminada a ''s''. No pude encontrar la manera de configurarlo como una opción, así que acabo de cambiar el código nvd3. Me encantaría simplemente cambiarlo como una opción, pero los documentos no estaban claros al respecto.

Answer 2

Tuve un problema similar. La implementación actual del método showTooltip nativo de nvd3 se ve de la siguiente manera:

var showTooltip = function(e, offsetElement) {
  var left = e.pos[0] + ( offsetElement.offsetLeft || 0),
    top = e.pos[1] + ( offsetElement.offsetTop || 0),
    x = xAxis.tickFormat()(multibar.x()(e.point, e.pointIndex)),
    y = yAxis.tickFormat()(multibar.y()(e.point, e.pointIndex)),
    content = tooltip(e.series.key, x, y, e, chart);

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

La implementación alinea incorrectamente las sugerencias de herramientas de diferentes maneras. Así que modifiqué el comportamiento que me solucionó el problema. Puede consultar mi tenedor https://github.com/ovvn/nvd3/blob/master/build/nv.d3.js