Tag: nvd3.js

与nvd3.js的实时线图: 我正在尝试使用nvd3.js创build一个实时graphics，这个graphics会定期更新，并带有数据被实时处理的印象。现在我已经能够创build一个定期更新graphics的函数，但是我不能像在向左转换的行那样在“状态”之间进行平滑过渡。这里是我使用nvd3.js，这里有趣的代码是： d3.select('#chart svg') .datum(data) .transition().duration(duration) .call(chart); 现在，我已经能够使用d3.js来生成我想要的东西，但我更愿意使用nvd3.js提供的所有工具。这是我想用nvd3制作的使用d3.js进行转换的有趣代码是： function tick() { // update the domains now = new Date(); x.domain([now – (n – 2) * duration, now – duration]); y.domain([0, d3.max(data)]); // push the accumulated count onto the back, and reset the count data.push(Math.random()*10); count = 0; // redraw the line svg.select(".line") […]

nvd3 piechart.js – 如何编辑工具提示？: 我正在使用nvd3的piechart.js组件在我的网站上生成一个饼图。提供的.js文件包含几个var，如下所示： var margin = {top: 30, right: 20, bottom: 20, left: 20} , width = null , height = null , showLegend = true , color = nv.utils.defaultColor() , tooltips = true , tooltip = function(key, y, e, graph) { return '<h3>' + key + '</h3>' + '<p>' + y + '</p>' } , […]

NVD3，加载新图表之前清除svg: 我有几个不同的NVD3图表，我要求在同一个SVG。我使用button来调用函数，每个函数都包含一个使用自己的数据的新图表。有没有办法清除我的单一svg而不删除它？我希望按下一个button来调用我的图表，但在新图表加载之前清除svg。使用这种图表时，这不是一个问题…例如，调用两个multibarhorizontal图表只是更新形状，这很好。问题是加载两个不同的图表，如线条和栏。提前致谢编辑 – 答案必须是类似于d 3.select("svg").remove()但只是删除svg。我只想清除它。

如何显示nvd3 / d3.js在X轴上的date？: 我正在使用nvd3，但我认为这是一个关于时间尺度和格式的普通d3.js问题。我创build了一个简单的例子来说明这个问题（见下面的代码）：如果我为xAxis省略.tickFormat，那么在没有date格式的情况下工作正常。用下面的例子，我得到的错误： Uncaught TypeError：Object 1326000000000 has no method'getMonth' nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis .axisLabel('Date') .rotateLabels(-45) .tickFormat(d3.time.format('%b %d')) ; chart.yAxis .axisLabel('Activity') .tickFormat(d3.format('d')); d3.select('#chart svg') .datum(fakeActivityByDate()) .transition().duration(500) .call(chart); nv.utils.windowResize(function() { d3.select('#chart svg').call(chart) }); return chart; }); function days(num) { return num*60*60*1000*24 } /************************************** * Simple test data generator */ function fakeActivityByDate() { var […]

rCharts nvd3 lineWithFocusChart自定义: 我在rCharts上使用nvd3，并想知道是否有一种方法来自定义lineWithFocusChart上较低视图查找器graphics的坐标轴。我在下面提供了一个可重现的例子，其中我自定义x和y轴以逗号分隔千位，但格式不显示在较低的取景器图表上。这怎么解决？谢谢！ library(rCharts) temp <- data.frame(x = 1:2000, y = 1:2000, z = c(rep(1,1000), rep(0,1000))) g <- nPlot(y ~ x, group = "z", data = temp, type = "lineWithFocusChart") g$templates$script <- "http://timelyportfolio.github.io/rCharts_nvd3_templates/chartWithTitle_styled.html" g$set(title = "Example") g$chart(transitionDuration = -1, tooltipContent = "#! function(key, x, y) { return 'z: ' + key + '<br/>' + […]

NVD3图表无法计算Chrome中的图例文字长度，因为Window.getComputedStyle不能正确返回字体大小: 背景信息我使用它的自定义小部件框架，将NVD3图表集成到Eclipse-RAP中。图表生成到一个div。通过在javascript中创build链接条目来dynamic加载CSS。我通过创build一个SVG /文本元素来检查CSS是否已经被加载，并且检查它的font-size是否正确（请参阅https://stackoverflow.com/a/7997710/337621 ）。如果CSS被加载，我创build图表。问题出于某种原因，图表在Chrome中无法正确显示。通常第一次在我的会话中显示正确，但第二次它始终是错误的。对于错误的情况，我已经在控制台中发现了这一点： Error: Invalid value for <g> attribute transform="translate(NaN,5)" 如果我重绘图表（例如通过更新图表数据或resize），图例正确呈现。预期：错误的布局：经过一些debugging，我find了相关的d3代码部分。 NVD3使用此函数请求SVG文本元素的字体大小： d3_selectionPrototype.style = function(name, value, priority) { var n = arguments.length; if (n < 3) { if (typeof name !== "string") { if (n < 2) value = ""; for (priority in […]

d3.js＆nvd3.js – 如何设置y轴范围: 我试图从1-100设置图表的y轴范围。查阅了API文档，并find了axis.tickValues的一个可能的解决scheme，如下所示https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues 但是，使用该选项不起作用。在axis.tickSize下方链接的文档页面上进一步阅读下面一行结束刻度由关联的刻度的域范围确定，并且是生成的path域的一部分，而不是刻度线所以我把它设置的范围的最小值和最大值不能通过轴选项来完成。任何想法，我可以指定范围？