nvd3.js

问题 I am using NVD3 with Flask and I have dates on the x-axis. As you can see the lines on x-axis don't coincide with the points. I printing out the day, month, year and hours on the x-axis. I don't understand why the dates are not equally spaced i.e the 'hours' are not the same even though my x-axis data is, so that the lines are more than "24 hrs" apart. I think this is causing the problem. (Edited) My code is: nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis .tickFormat

问题 I am using NVD3 with Flask and I have dates on the x-axis. As you can see the lines on x-axis don't coincide with the points. I printing out the day, month, year and hours on the x-axis. I don't understand why the dates are not equally spaced i.e the 'hours' are not the same even though my x-axis data is, so that the lines are more than "24 hrs" apart. I think this is causing the problem. (Edited) My code is: nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis .tickFormat

问题 For the following slidify deck, --- title : Foo framework : revealjs # {io2012, html5slides, shower, dzslides, ...} revealjs : {theme: solarized} highlighter : highlight.js # {highlight.js, prettify, highlight} hitheme : tomorrow # widgets : [] # {mathjax, quiz, bootstrap} mode : selfcontained # {standalone, draft} ext_widgets : [libraries/nvd3] --- ## NVD3 Plot Iframe ```{r nvd3plot2, results = 'asis', comment = NA, message = F, echo = F} require(rCharts) n1 <- nPlot(mpg ~ wt, data = mtcars,

问题 I'm trying to set the y-axis range of the chart from 1-100. Consulted the API documentation and found a possible solution with axis.tickValues as seen here https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues However, using the option does not work. Reading further down on the documentation page linked above under axis.tickSize, the following line was spotted The end ticks are determined by the associated scale's domain extent, and are part of the generated path domain rather than a

问题 Is there a easy way to sort bars (ascending or descending) on Nvd3 discreteBarChart or on the HorizontalBarChart . I think a function should be added to the main lib (Nvd3) so that the option can be used as below: .sortAscending(true) //Used for ascending bars according to their value or .sortDescending(true) //Used for descending bars according to their value 回答1: try this, i implemented in my application, include this in your addGraph method before returning chart object var parent = $('svg

问题 Based on this stackoverflow answer I was trying to copy essential parts to get proper scale for timeline. I use multibarcharts for multible graphs, from few records to hundreds with X-axis having data from 1930 to today. I've copied it like this, but I have two issues: Last bar is always outside of graph bars overlap, which I can partly fix by altering numTicks , but isn't there a better way? <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf

问题 I am trying to change the colors of different lines of the nvd3 line chart here but am unable to understand how to do so. I would like to change the colors of the 2 lines in the example to green and cyan. I tried nv.addGraph(function() { var chart = nv.models.lineChart() .useInteractiveGuideline(true) .color(["rgb(0,255,0)","rgb(255,165,0)"]); } It worked for scatter chart here. But the color does not change for line chart. Any suggestions. Thanks 回答1: You can use this! return [ { values:

问题 I'm trying to generate a linechart in NVD3 with a vertical line. Particularly this kind of line chart. The linechart has two panels a viewing panel and a zoom panel, I would want the line to be on both. Something like this: Is this feasible? Edit: I found out a way to do this by just appending to the data an extra stream which represents a line. e.g. streams[3] = {key:'myline', values:[{x:68,y:0},{x:68,y:7}]} Is there a better way? 回答1: Yes it's possible, Here is an example of how to do it :

问题 The issue is that I have a lot of series on my chart and, on load, I would like only 3 selected. Is there a way to 'disable' ( hide ) a series on nvd3 Horizontal Multi-Bar Chart? ( I'm looking for the click series behavior but programatically ) I have tried to send JSON with 'visible': false, but it not works. var data=[{"key": "Series 1", "visible": false, "values": [{"value": 10000.0, "label": ... Following @shabeer90 instructions tested with: "disabled": true, In this case series is

问题 I am building a bar chart using nvd3's multiBarChart and need to adjust the position of rotated x-axis labels: var chart = nv.models.multiBarChart(); ... chart.rotateLabels(-90); I would like the column labels to not overlap the chart and be centered under each bar. I could select the labels after plotting the chart and adjust them but is there an easier way? 回答1: The best way I have found to handle this is to perform the rotation of the x-axis tick labels yourself. Why? Because NVD3 is not