Tag: d3.js

d3js树广场: 我想用d3.js来构build谱系树。我发现的所有例子都展示了有机的树木。那里有像样式的血统书吗？

在D3.js中绘制多行: 到目前为止，我一直在使用循环向D3可视化添加线条元素，但是这看起来并不符合API的精神。比方说，我有一些数据， var data = {time: 1, value: 2, value2: 5, value3: 3,value4: 2}, {time: 2, value: 4, value2: 9, value3: 2,value4: 4}, {time: 3, value: 8, value2:12, value3: 2,value4:15}]); 我想要四条线，时间是所有四条线的X轴。我可以做这样的事情： var l = d3.svg.line() .x(function(d){return xScale(d[keys[0]]);}) .y(function(d,i){ return yScale(d[keys[1]]);}) .interpolate("basis"); var l2 = d3.svg.line() .x(function(d){return xScale(d[keys[0]]);}) .y(function(d,i){ return yScale(d[keys[2]]);}) .interpolate("basis"); var l3 = […]

3维（X，Y和Z）图使用D3.js: 我在D3.js上search一个有3个维度（X，Y和Z）的图。请让我知道，如果有任何数据可视化网站，我可以find这样的graphics，或者有一个关于d3js.org如果我错过了某种方式。

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>' } , […]

iOS和其他平板电脑上的SVG性能状态？: 在决定使用D3.js和SVG进行可视化后，现在看起来SVG在桌面浏览器或本地shell中可以正常工作，但是我真的为iOS移动平台的性能下降感到困惑。根据下面的testing，现在看起来SVG的性能正在变得越来越好，而且还没有远远落后于Canvas的速度，这是一个好消息： http://bl.ocks.org/2647924 http://bl.ocks.org/2647922 坏消息是，如果你在新的iPad上的Safari浏览器中运行这些testing，SVG和Canvas的速度都会下降。可怕的消息是，如果您在iPad的新Chrome浏览器中运行这些testing，则速度会下降得更多。我读过谷歌被迫使用未被苹果的Nitro JavaScript引擎加速的UIWebview。我也读过苹果公司推HTML5，但演示只能在他们自己的Safari浏览器中运行。这里有什么问题吗？我的应用程序的最佳目标是移动设备，即使是像D3.js和HTML5标准的优秀API（例如SVG性能正在被压缩），这是否仅仅是因为苹果想要为自己的议程取得进展？多数民众赞成在我看来，无论如何。我不确定这些testing在Android上是什么样子的？这将是很高兴知道。如果testing会是积极的，也许我会摆脱iPad，只是与Android已经。底线是，我不确定是否可以使我的应用程序使用HTML5技术由于这些速度问题？我也没有兴趣学习Objective-C，因为未来将转向HTML5。我相信networking及其标准，但看起来像被阻止。我很想知道解决这个困境的方法。

处理d3.js轴上的date: 如何在d3.js中根据date生成我的行x轴？我试图教自己如何使用d3.js 我一直在看它附带的例子，并试图用json交付的数据重新创build线图。我能够将数据input到折线图中，但是x轴应该是date而不是数字。我正在使用的date格式是MM / DD / YY，但graphics绘制所有的零。我的JSON数据是通过罚款，但我无法弄清楚如何绘制X坐标。这是直接从下载的d3.js示例文件夹中的line.js中获取的。 date部分没有办法。我希望有人能指点我一个例子，或者能够解释我如何使它工作。 d3.json('jsonChartData.action', function (data) { console.log(data); var w = 450, h = 275, p = 30, x = d3.scale.linear().domain([0, 100]).range([0, w]), y = d3.scale.linear().domain([0, 100]).range([h, 0]); var vis = d3.select("body") .data([data]) .append("svg:svg") .attr("width", w + p * 2) .attr("height", h + p * 2) […]

如何用一个值函数设置多个属性？: 给定包含多个数据元素（如对象或数组）的数据，是否可以使用单个值函数在select上设置多个属性？例如： var data = [{ 'x': 10, 'y': 20, 'r': 5 }]; d3.select('body').append('svg').selectAll('circle') .data(data) .enter().append('circle') .attr('cx cy r', function (d) { return [dx, dy, dr]; }); 代替： var data = [{ 'x': 10, 'y': 20, 'r': 5 }]; d3.select('body').append('svg').selectAll('circle') .data(data) .enter().append('circle') .attr('cx', function (d) { return dx; }); .attr('cy', function (d) { return dy; […]

如何生成Google Analytics的访问者stream量图表/图表？: 我正在尝试生成一个与最近Google Analytics（分析）访问者stream程类似的图表。这些也被称为冲积图。我可以使用基于Web或非Web的解决scheme，只要我可以自己运行它。我想要显示的数据如下：在t1时刻，我有x1个单位，分成n1个部分在时刻t2，n1个部分以x2个单位分割（或合并）成n2个部分我想显示拆分/合并的地方。我的数据目前在NetworkX中用DiGraph表示，但这可能是不相关的，因为我可以以任何所需的格式输出数据。

d3.scale.category10（）的d3.js v4.0相当于什么？: 我正在尝试使用交互式Web可视化书籍来学习D3，但4.0版本已经改变了很多。有一件事，我真的不知道是否有一个等效的d3.scale.category10（）来获得一个简单的映射到颜色。在新版本中是否有这样的东西，或者我们需要使用math.random并自己编码？

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