nvd3.js | 易学教程

MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?

阅读更多关于 MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?

问题 Data: nvd3TestData = [ { values:[ {x:"M",y:1}, {x:"T",y:2}, {x:"W",y:3}, {x:"R",y:3}, {x:"F",y:4}, {x:"S",y:5}, {x:"U",y:6} ], key:"Apples" }, { values:[ {x:"M",y:5}, {x:"T",y:2}, {x:"W",y:6}, {x:"R",y:8}, {x:"F",y:2}, {x:"S",y:4}, {x:"U",y:1} ], key:"Zebras" } ] Creating the chart (pulled from an angularjs directive): nv.addGraph -> chart = nv.models.multiBarChart() .stacked(true) .showControls(false) chart.xAxis .axisLabel(attrs.xAxisLabel) chart.yAxis .axisLabel(attrs.yAxisLabel)

d3.v3 scatterplot with all circles the same radius

阅读更多关于 d3.v3 scatterplot with all circles the same radius

问题 Every example I have found shows all of the scatter plot points to be of random radii. Is it possible to have them all the same size? If I try to statically set the radius all of the circles will be very small (I'm assuming the default radius). However, if I use Math.random() as in most examples there are circles large and small. I want all the circles to be large. Is there a way to do that? Here's the code snippet forming the graph data using Math.random() (this works fine for some reason):

nvd3 line chart, how to remove gridlines and yaxis

阅读更多关于 nvd3 line chart, how to remove gridlines and yaxis

I have made a line chart with view finder. Here is my initial code var chart = nv.models.lineWithFocusChart(); // chart.transitionDuration(500); chart.xAxis .tickFormat(d3.format(',g')); chart.xAxis .axisLabel("Date"); chart.xAxis.tickPadding(0); chart.x2Axis .tickFormat(d3.format(',g')); chart.yAxis .tickFormat(d3.format(',.2g')); chart.y2Axis .tickFormat(d3.format(',.2h')); // chart.showYAxis(false); I want to remove the y axis labels ( i.e. i want no number showing on the y axis). I also want to remove all the gridlines. is there something like chart.yAxis.somethinghere to do this? Thanks

Convert SVG to image in PNG

阅读更多关于 Convert SVG to image in PNG

问题 i am converting angular nvd3 chart to svg using html2canvas and canvg plugings but when i convert pie chart to png then i looks same as chart but when i convert line chart or area chart then its background goes to black and some circle drown on image. My code is var svgElements = $("#container").find('svg'); //replace all svgs with a temp canvas svgElements.each(function () { var canvas, xml; // canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace

nvd3 scatterPlot with rCharts in R: Vary size of points?

阅读更多关于 nvd3 scatterPlot with rCharts in R: Vary size of points?

I've been playing with rCharts and nvd3 for a bit of time now. Now I'm in a situation where I need a bubble chart, or at least a scatterplot where the size of the dots is dependent on a variable in the data. From this example , it seems possible. The example on scatter charts in rCharts is: library(rCharts) p1 <- nPlot(mpg ~ wt, group = 'cyl', data = mtcars, type = 'scatterChart') p1$xAxis(axisLabel = 'Weight') p1 So I've tried setting size to, for example gears . But it doesn't change anything. p2 <- nPlot(mpg ~ wt, group = 'cyl', size = 'gear', data = mtcars, type = 'scatterChart') p2$xAxis

How to display values in Stacked Multi-bar chart - nvd3 Graphs

阅读更多关于 How to display values in Stacked Multi-bar chart - nvd3 Graphs

问题 I got a scenario where in I need to display value for every stack in stacked multi-bar chart - nvd3 graph as we can display value in discrete value - nvd3 graph. I understand, 'showvalue' is used in discrete bar controller, can we use showvalue in stacked graph, if not please suggest with an alternative solution. Thanks in advance 回答1: Currently isn't possible. That option is available only in the discrete bar chart. From the maintainer: We don't have this ability. Stacked/Grouped charts also

How do I change the legend position in a NVD3 chart?

阅读更多关于 How do I change the legend position in a NVD3 chart?

Does anyone know how to reposition the legend in a NVD3 chart relative to the graph itself? It is on top by default, and I would like it to go on the side (better use of space within my app) An example of what I would like to do: There is AFAIK no option to do this, but you can select the g element that contains the legend manually and move it, e.g. d3.select(".nv-legendWrap") .attr("transform", "translate(100,100)"); Michael As of this writing (2 jul 2015) nvd3 supports putting the legend to the right of the pie chart. When you initialize the graph, set legendPosition to right . Example: nv

NVD3 line chart with realtime data

阅读更多关于 NVD3 line chart with realtime data

I have a really simple line chart written using NVD3.js. I've written a simple redraw based on timer, pulled from examples I've seen, but I get the error Uncaught TypeError: Cannot read property 'y' of undefined The JS is var data = [{ "key": "Long", "values": getData() }]; var chart; nv.addGraph(function () { chart = nv.models.cumulativeLineChart() .x(function (d) { return d[0] }) .y(function (d) { return d[1] / 100 }) .color(d3.scale.category10().range()); chart.xAxis .tickFormat(function (d) { return d3.time.format('%x')(new Date(d)) }); chart.yAxis .tickFormat(d3.format(',.1%')); d3.select

Stacked Area Chart in nvd3js - X Axis overflow

阅读更多关于 Stacked Area Chart in nvd3js - X Axis overflow

问题 I am trying to implement a 'Stacked Area Chart' with d3js and nvd3.js similar to this example. Additionally, I'd like to use a context brush like this one to select a date range, which effects the Stacked Area Chart. Actually, this is already working but somehow it draws some lines on top of the Y-Axis as soon as the selected date range does not contain the first date. Just have a look on the following picture: Here is my code: Stacked Area Chart var margin = { top : 10, right : 20, bottom :

nvd3 line chart with string values on x-axis

阅读更多关于 nvd3 line chart with string values on x-axis

i'm new to nvd3 charts. i need a line chart, with string-values on the x-axis the chart should be like this Bar Chart , but i need a line, instead of bars my result looks like this Line Chart The values are all mapped to x=0 my code nv.addGraph(function() { var chart = nv.models.lineChart() .useInteractiveGuideline(true) .transitionDuration(350) .x(function(d) { return d.x}) .y(function(d) { return d.y}) .showLegend(true) .showYAxis(true) .showXAxis(true); chart.xAxis.tickValues(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]); d3.select(element + ' svg') .datum