Tag: d3.js

如何显示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 […]

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 vs Raphael.js: 我对d3和Raphael都很着迷。我知道Raphael是build立在D3之上的，它是跨浏览器兼容的，但我不确定哪一个更适合于什么场景。有人可以请一些光？我的直接用例可能使用SIMILE时间轴并将其与状态图（我打算使用d3 / Raphael）进行整合。谢谢！

Uncaught TypeError：无法读取未定义的属性“线性”: 我是D3新手，在我的演示脚本中出现以下错误 – FirstD3.jsp：31 Uncaught TypeError：无法读取未定义的属性“线性” 我的演示代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <title>Linear Scales</title> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> var dataset = [ [ 5, 20 ], [ 460, 90 ], [ 250, 50 ], [ 100, 33 ], [ 330, 95 ], [ 410, 12 ], [ 468, […]

将标签放置在d3.js中的节点的中心: 我从d3.js开始，尝试创build一个包含居中号码标签的节点行。我能够在视觉上产生所需的结果，但是我所做的方式并不是最佳的，因为它涉及硬编码每个文本元素的xy坐标。以下是代码： var svg_w = 800; var svg_h = 400; var svg = d3.select("body") .append("svg") .attr("width", svg_w) .attr("weight", svg_h); var dataset = []; for (var i = 0; i < 6; i++) { var datum = 10 + Math.round(Math.random() * 20); dataset.push(datum); } var nodes = svg.append("g") .attr("class", "nodes") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("class", […]

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域的一部分，而不是刻度线所以我把它设置的范围的最小值和最大值不能通过轴选项来完成。任何想法，我可以指定范围？

如何删除D3.js中的属性？: 我可以在D3.JS中删除一个属性吗？我已经使用.attr("disabled", "disabled")添加它，现在我正在寻找类似于jQuery的.removeAttr("disabled", "disabled"); 再次移除它。对<button>和<option>有用。我试过使用.remove()但是删除整个对象而不是属性。

使用D3和Shiny在R中实现`identify（）`: 我问了一个关于如何根据用户交互进行dynamic绘图的问题，其解决scheme在我的机器上运行得非常好。现在我想制作一个在线版本，并使用Shiny进行托pipe。我已经尝试将代码放入server.R并调用reactivePlot() server.R iden()函数，但是identify()的部分不起作用。那么，这个任务有什么提示？

如何添加一个工具提示到一个SVGgraphics？: 我有一系列的svg矩形（使用D3.js），我想在鼠标hover上显示一条消息，消息应该被作为背景的框包围。他们应该完全alignment到矩形（在顶部和居中）。做这个的最好方式是什么？我尝试使用“x”，“y”，“width”和“height”属性添加一个svg文本，然后添加一个svg矩形。问题是，文本的参考点是在中间（因为我希望它居中alignment我使用text-anchor: middle ），但对于矩形它是左上angular的坐标，再加上我想围绕文本的一点空白这使得它有点痛苦。另一个select是使用html div，这将是很好的，因为我可以直接添加文本和填充，但我不知道如何获得每个矩形的绝对坐标。有没有办法做到这一点？