nvd3.js

问题 How can I capture the mouse over events of two graphs at once. I need to do something like shown in the image below: Can anyone guide me as to how should I approach this ?. So far I was able to get the simple mouseover working for a single graph. 回答1: I'm the author of function-plot which is able to dispatch events to multiple graphs one of them being mouseover , for example var width = 300 var height = 180 var a = functionPlot({ target: '#a', height: height, width: width, data: [{ fn: 'x^2'

问题 I need to add more attributes in tooltip series in Angular NVD3 line chart, if possible, without modifying the NVD3 source code. I know there are similar posts, but none of them covers this scenario. Here is my tooltip section in options: interactiveLayer: { tooltip: { contentGenerator: function (d) { // output is key, value, color, which is the default for tooltips console.log(JSON.stringify(d.series[0])); //{"key":"Name","value":1000,"color":"rgba(255,140,0, 1)"} // and I need more

问题 I need to add more attributes in tooltip series in Angular NVD3 line chart, if possible, without modifying the NVD3 source code. I know there are similar posts, but none of them covers this scenario. Here is my tooltip section in options: interactiveLayer: { tooltip: { contentGenerator: function (d) { // output is key, value, color, which is the default for tooltips console.log(JSON.stringify(d.series[0])); //{"key":"Name","value":1000,"color":"rgba(255,140,0, 1)"} // and I need more

问题 I am trying to get a specific width value set on a nvd3 discrete bar chart. I can change the rect elements after the initial render, but it seems like there would be some way to designate a bar width in the set-up of the chart. Here is my current chart settings. nv.addGraph -> chart = nv.models.discreteBarChart() .x (d) -> return d.label .y (d) -> return d.value .staggerLabels(false).showValues(false) .color(['#56bd78']).tooltips(false) .margin({top: 0, right: 0, bottom: 30, left: 0}) chart

问题 I´m using a NVD3.js multichart to display various data. Is it possible set a fixed range for the x- and y-axis. I´ve made a Plunker example: http://plnkr.co/edit/OLN87eIE21tImHktYIH6?p=preview var chart = nv.models.multiChart() .margin({top: 30, right: 60, bottom: 50, left: 70}) .color(d3.scale.category10().range()); chart.xAxis.tickFormat(function(d) { return d3.time.format('%H:%m')(new Date(d)); }); chart.yAxis1.tickFormat(d3.format(',.1f')); chart.yAxis2.tickFormat(d3.format(',.1f')); d3

问题 I´m using a NVD3.js multichart to display various data. Is it possible set a fixed range for the x- and y-axis. I´ve made a Plunker example: http://plnkr.co/edit/OLN87eIE21tImHktYIH6?p=preview var chart = nv.models.multiChart() .margin({top: 30, right: 60, bottom: 50, left: 70}) .color(d3.scale.category10().range()); chart.xAxis.tickFormat(function(d) { return d3.time.format('%H:%m')(new Date(d)); }); chart.yAxis1.tickFormat(d3.format(',.1f')); chart.yAxis2.tickFormat(d3.format(',.1f')); d3

问题 I want to call a function from d3 event handler. I'm able to access on click event as I'm able to print console message but if I call function from there it is giving error. I'm getting following error: bundle.js:96593 Uncaught TypeError: Cannot read property 'selectNodeById' of undefined at SVGGElement. (bundle.js:96593) at SVGGElement.__onclick (bundle.js:28032) Code : import React, { Component } from 'react'; import NVD3Chart from 'react-nvd3'; import d3 from 'd3'; const datum = [{ x:

问题 I'm learning nvd3.js to draw charts. From a sample from the site, I pick following simple code to test: chart = nv.models.lineChart() .margin({ left: 100, right: 100 }) //Adjust chart margins to give the x-axis some breathing room. .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! .transitionDuration(350) //how fast do you want the lines to transition? .showLegend(true) //Show the legend, allowing users to turn on/off line series. .showYAxis(true) //Show the y

问题 I followed this post: http://gonehybrid.com/bring-your-ionic-app-to-life-getting-started-with-d3-js/ I have all the libraries but unfortunately, I get this error: Error: [$injector:modulerr] Failed to instantiate module starter due to: [$injector:modulerr] Failed to instantiate module nvd3 due to: [$injector:nomod] Module 'nvd3' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

问题 I followed this post: http://gonehybrid.com/bring-your-ionic-app-to-life-getting-started-with-d3-js/ I have all the libraries but unfortunately, I get this error: Error: [$injector:modulerr] Failed to instantiate module starter due to: [$injector:modulerr] Failed to instantiate module nvd3 due to: [$injector:nomod] Module 'nvd3' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.