I am searching for a graph which has 3 dimensions (x, y, and z) and uses D3.js. Please let me know if there are any data visualization site where I can find such graph or if there is one on d3js.org that I have missed out somehow.
我正在寻找一个具有三维(x, y, z)的图形，并使用D3.js。请告诉我是否有任何数据可视化网站，我可以找到这样的图表，或者如果有一个在d3js.org上，我已经错过了。
6 个解决方案
#1
55
The 3D scatterplot linked to by VividD and Lars Kotthoff is probably the best example of what you're asking for, but I'm going to be contrary and suggest that maybe you're asking the wrong question.
与VividD和Lars Kotthoff有关的3D scatterplot可能是你所要求的最好的例子，但我将会相反，并暗示也许你问错了问题。
Trying to simulate three spatial dimensions on a flat screen will always be imperfect and make it difficult to read the data. However, it is very easy to graph three different data dimensions in D3. You use the horizontal and vertical layouts for two of your data variables, and then size, shape, color or shading for your third variable.
试图在平面屏幕上模拟三维空间总是不完美的，并且很难读取数据。但是，在D3中很容易绘制出三个不同的数据维度。您可以使用两个数据变量的水平和垂直布局，然后为您的第三个变量设置大小、形状、颜色或阴影。
If all three of your data variables are best represented by continuous numbers, then your best approach is to use a bubble-scatterplot, where your three display dimensions are horizontal positions, vertical position, and bubble size.
如果所有三个数据变量都以连续数字表示，那么最好的方法是使用气泡散点图，其中三个显示维度是水平位置、垂直位置和气泡大小。
Here's an example the also uses the online interactive component to add a fourth dimension shown via motion:
Bubble Scatterplot -- click for original
这里有一个例子，它还使用在线交互组件来添加通过运动显示的第四个维度:Bubble Scatterplot——单击原始。
You said that your three dimensions are Customer, Product and content. I don't know what kind of value "content" is (number or category), but I'm pretty sure that "customer" and "product" are categories.
您说过您的三个维度是客户、产品和内容。我不知道“内容”是什么(数字或类别)，但我很确定“客户”和“产品”是类别。
Here's an example where two categorical dimensions are used to lay out a table, then each cell of the table contains a circle sized by the third, numerical dimension. If your third variable is a category, you could use a shape to indicate which "content" type (if any) goes with each pairing of "customer" and "product":
Bubble Matrix -- click for original
这里有一个例子，其中两个分类维度用于放置一个表，然后表的每个单元格都包含一个由第三个数字维度组成的圆。如果您的第三个变量是一个类别，您可以使用一个形状来指示“用户”和“产品”的每一对“内容”类型(如果有的话)，即“气泡矩阵”——单击“原始”。
Here's another one, where the third dimension is shown by colour instead of by size. The colours represent a continuous variable, but you could easily choose a set of high-contrast colours to represent categories:
Colour Matrix -- click for original
这是另一个，第三维是由颜色而不是大小来显示的。颜色代表一个连续的变量，但是你可以很容易地选择一组高对比度的颜色来表示类别:颜色矩阵——点击原始。
Of course, a plain-old stacked bar chart is another way to show two categories and a numerical quantity:
Stacked Bar Graphs -- click for original
当然，一个普通的堆叠条形图是另一种显示两个类别和数量的方法:堆叠柱状图——点击原始。
And you don't have to stop at three data variables. If two of the data variables are either categories or numbers that you don't mind grouping into categories, you can graph four variables with a "small multiple" approach, where you create a table representing the categorical variables and then repeat a graph of the other two variables inside each table cell.
你不需要在三个数据变量上停下来。如果两个变量的数据类别或数字,你不介意分组分类,你可以用“小多个“图四个变量的方法,当你创建一个表代表分类变量,然后重复一个图形的其他两个变量在每个单元格。
Like this:
Scatterplot Matrix -- click for original
像这样:散点图矩阵——点击原始。
Or this (where week and day-of-week are two dimensions of the data, and category/amount are the other two):
Pie Chart Small Multiples -- click for original
或者这个(周和星期是数据的两个维度，类别/数量是另外两个):饼图小的倍数——点击原始。
I hope that gave you lots of ideas...
我希望这能给你很多建议……
#2
36
One example that a kind of resembles what you seek is:
一个类似于你所寻求的例子是:
三维散点图
Be aware that this example uses X3DOM, a fairly new attempt to standardize 3D rendering in HTML, that is not supported by all browsers.
请注意，这个例子使用了X3DOM，这是一种全新的尝试，以标准化HTML中的3D呈现，而不是所有的浏览器都支持它。
Some additional test examples on using D3.js with X3DOM:
使用D3的一些额外的测试示例。js X3DOM:
X3DOM在回调测试
D3 X3DOM事件测试
Search also for X3DOM on D3 Google group.
搜索D3谷歌组的X3DOM。
Another potentially interesting approach would be using D3.js and Three.js, like here:
另一个可能有趣的方法是使用D3。js和三个。js,比如:
Showing GPS tracks in 3D with three.js and d3.js
用三维显示GPS轨迹。js和d3.js
In general, D3.js is oriented more towards data visualization than scientific visualization, this means it doesn't have extensive support for displaying 3D space (with an exception of displaying geographic 3D data, which D3.js supports in an excellent way, but this is not what need).
一般来说,D3。js更倾向于数据可视化而不是科学可视化，这意味着它没有广泛的支持来显示3D空间(除了显示地理三维数据，D3是一个例外)。js支持的方式很好，但这不是我们需要的。
For example (this example is not related directly to your examples, it's just for explanation): D3 provides algorithm for 2D drawing of trees, but doesn't provide any apparatus for 3D placement of trees and subsequent rendering such placement on a 2D screen.
例如，(这个例子与你的例子没有直接关系，只是为了说明):D3提供了对树的2D绘图的算法，但是没有提供任何用于3D放置树的设备，以及在2D屏幕上呈现这样的位置。
If you are not limited to D3.js, perhaps you could achieve same goals easier and faster with other libraries, written specifically for purposes similar to yours. For example, you can use Pre3D. Take a look at this example. Pre3D doesn't use X3DOM, just plain HTML rendering on 2D canvas. I think it animation (rotation) of its 3D graphs are smoother that those in first D3/X3DOM example.
如果你不限于D3。js，也许你可以和其他的库更容易、更快地实现相同的目标，专门为类似于你的目的而写。例如，您可以使用Pre3D。看一下这个例子。Pre3D不使用X3DOM，只是在2D画布上进行纯HTML渲染。我认为它的3D图形的动画(旋转)更流畅，这是第一个D3/X3DOM的例子。
Hope this answer would help you.
希望这个答案对你有帮助。
#3
8
The best examples I could find (which were both incredibly simple) were:
我能找到的最好的例子(都非常简单)是:
Highcharts (3d scatter)
Highcharts(3 d分散)
http://www.highcharts.com/demo/3d-scatter-draggable
http://www.highcharts.com/demo/3d-scatter-draggable
Vis.js (various 3d options such as bar and dot)
js(各种3d选项，如bar和dot)
http://visjs.org/examples/graph3d/playground/index.html
http://visjs.org/examples/graph3d/playground/index.html
Simply supply x, y and z co-ordinates, set the config how you like and you're laughing.
简单地提供x、y和z坐标，设置你喜欢的配置和你的笑声。
#4
6
It looks like a new example of something more properly speaking "3D" has come out. http://bl.ocks.org/supereggbert/aff58196188816576af0
它看起来就像一个新的例子，更恰当地说“3D”已经出来了。http://bl.ocks.org/supereggbert/aff58196188816576af0
And here is an adaptation I made:
这是我做的一个调整:
http://bl.ocks.org/adrianturcato/cf665b7cca9f6057691a
http://bl.ocks.org/adrianturcato/cf665b7cca9f6057691a
#5
2
I created d3-3d, a d3-plugin which helps you to visualize your 3d-data. Hopefully this helps to achieve your goal.
我创建了d3-3d，一个d3-plugin，它帮助您可视化您的3d数据。希望这有助于实现你的目标。
#6
1
Stefan Nieke has been more recently doing some cool stuff too with his d3-3d plugin: https://bl.ocks.org/Niekes
Stefan Nieke最近也做了一些很酷的事情，他的d3-3d插件:https://bl.ocks.org/Niekes。
#1
55
The 3D scatterplot linked to by VividD and Lars Kotthoff is probably the best example of what you're asking for, but I'm going to be contrary and suggest that maybe you're asking the wrong question.
与VividD和Lars Kotthoff有关的3D scatterplot可能是你所要求的最好的例子，但我将会相反，并暗示也许你问错了问题。
Trying to simulate three spatial dimensions on a flat screen will always be imperfect and make it difficult to read the data. However, it is very easy to graph three different data dimensions in D3. You use the horizontal and vertical layouts for two of your data variables, and then size, shape, color or shading for your third variable.
试图在平面屏幕上模拟三维空间总是不完美的，并且很难读取数据。但是，在D3中很容易绘制出三个不同的数据维度。您可以使用两个数据变量的水平和垂直布局，然后为您的第三个变量设置大小、形状、颜色或阴影。
If all three of your data variables are best represented by continuous numbers, then your best approach is to use a bubble-scatterplot, where your three display dimensions are horizontal positions, vertical position, and bubble size.
如果所有三个数据变量都以连续数字表示，那么最好的方法是使用气泡散点图，其中三个显示维度是水平位置、垂直位置和气泡大小。
Here's an example the also uses the online interactive component to add a fourth dimension shown via motion:Bubble Scatterplot -- click for original
这里有一个例子，它还使用在线交互组件来添加通过运动显示的第四个维度:Bubble Scatterplot——单击原始。
You said that your three dimensions are Customer, Product and content. I don't know what kind of value "content" is (number or category), but I'm pretty sure that "customer" and "product" are categories.
您说过您的三个维度是客户、产品和内容。我不知道“内容”是什么(数字或类别)，但我很确定“客户”和“产品”是类别。
Here's an example where two categorical dimensions are used to lay out a table, then each cell of the table contains a circle sized by the third, numerical dimension. If your third variable is a category, you could use a shape to indicate which "content" type (if any) goes with each pairing of "customer" and "product":
Bubble Matrix -- click for original
这里有一个例子，其中两个分类维度用于放置一个表，然后表的每个单元格都包含一个由第三个数字维度组成的圆。如果您的第三个变量是一个类别，您可以使用一个形状来指示“用户”和“产品”的每一对“内容”类型(如果有的话)，即“气泡矩阵”——单击“原始”。
Here's another one, where the third dimension is shown by colour instead of by size. The colours represent a continuous variable, but you could easily choose a set of high-contrast colours to represent categories:Colour Matrix -- click for original
这是另一个，第三维是由颜色而不是大小来显示的。颜色代表一个连续的变量，但是你可以很容易地选择一组高对比度的颜色来表示类别:颜色矩阵——点击原始。
Of course, a plain-old stacked bar chart is another way to show two categories and a numerical quantity: Stacked Bar Graphs -- click for original
当然，一个普通的堆叠条形图是另一种显示两个类别和数量的方法:堆叠柱状图——点击原始。
And you don't have to stop at three data variables. If two of the data variables are either categories or numbers that you don't mind grouping into categories, you can graph four variables with a "small multiple" approach, where you create a table representing the categorical variables and then repeat a graph of the other two variables inside each table cell.
你不需要在三个数据变量上停下来。如果两个变量的数据类别或数字,你不介意分组分类,你可以用“小多个“图四个变量的方法,当你创建一个表代表分类变量,然后重复一个图形的其他两个变量在每个单元格。
Like this:Scatterplot Matrix -- click for original
像这样:散点图矩阵——点击原始。
Or this (where week and day-of-week are two dimensions of the data, and category/amount are the other two):
Pie Chart Small Multiples -- click for original
或者这个(周和星期是数据的两个维度，类别/数量是另外两个):饼图小的倍数——点击原始。
I hope that gave you lots of ideas...
我希望这能给你很多建议……
#2
36
One example that a kind of resembles what you seek is:
一个类似于你所寻求的例子是:
三维散点图
Be aware that this example uses X3DOM, a fairly new attempt to standardize 3D rendering in HTML, that is not supported by all browsers.
请注意，这个例子使用了X3DOM，这是一种全新的尝试，以标准化HTML中的3D呈现，而不是所有的浏览器都支持它。
Some additional test examples on using D3.js with X3DOM:
使用D3的一些额外的测试示例。js X3DOM:
X3DOM在回调测试
D3 X3DOM事件测试
Search also for X3DOM on D3 Google group.
搜索D3谷歌组的X3DOM。
Another potentially interesting approach would be using D3.js and Three.js, like here:
另一个可能有趣的方法是使用D3。js和三个。js,比如:
Showing GPS tracks in 3D with three.js and d3.js
用三维显示GPS轨迹。js和d3.js
In general, D3.js is oriented more towards data visualization than scientific visualization, this means it doesn't have extensive support for displaying 3D space (with an exception of displaying geographic 3D data, which D3.js supports in an excellent way, but this is not what need).
一般来说,D3。js更倾向于数据可视化而不是科学可视化，这意味着它没有广泛的支持来显示3D空间(除了显示地理三维数据，D3是一个例外)。js支持的方式很好，但这不是我们需要的。
For example (this example is not related directly to your examples, it's just for explanation): D3 provides algorithm for 2D drawing of trees, but doesn't provide any apparatus for 3D placement of trees and subsequent rendering such placement on a 2D screen.
例如，(这个例子与你的例子没有直接关系，只是为了说明):D3提供了对树的2D绘图的算法，但是没有提供任何用于3D放置树的设备，以及在2D屏幕上呈现这样的位置。
If you are not limited to D3.js, perhaps you could achieve same goals easier and faster with other libraries, written specifically for purposes similar to yours. For example, you can use Pre3D. Take a look at this example. Pre3D doesn't use X3DOM, just plain HTML rendering on 2D canvas. I think it animation (rotation) of its 3D graphs are smoother that those in first D3/X3DOM example.
如果你不限于D3。js，也许你可以和其他的库更容易、更快地实现相同的目标，专门为类似于你的目的而写。例如，您可以使用Pre3D。看一下这个例子。Pre3D不使用X3DOM，只是在2D画布上进行纯HTML渲染。我认为它的3D图形的动画(旋转)更流畅，这是第一个D3/X3DOM的例子。
Hope this answer would help you.
希望这个答案对你有帮助。
#3
8
The best examples I could find (which were both incredibly simple) were:
我能找到的最好的例子(都非常简单)是:
Highcharts (3d scatter)
Highcharts(3 d分散)
http://www.highcharts.com/demo/3d-scatter-draggable
http://www.highcharts.com/demo/3d-scatter-draggable
Vis.js (various 3d options such as bar and dot)
js(各种3d选项，如bar和dot)
http://visjs.org/examples/graph3d/playground/index.html
http://visjs.org/examples/graph3d/playground/index.html
Simply supply x, y and z co-ordinates, set the config how you like and you're laughing.
简单地提供x、y和z坐标，设置你喜欢的配置和你的笑声。
#4
6
It looks like a new example of something more properly speaking "3D" has come out. http://bl.ocks.org/supereggbert/aff58196188816576af0
它看起来就像一个新的例子，更恰当地说“3D”已经出来了。http://bl.ocks.org/supereggbert/aff58196188816576af0
And here is an adaptation I made:
这是我做的一个调整:
http://bl.ocks.org/adrianturcato/cf665b7cca9f6057691a
http://bl.ocks.org/adrianturcato/cf665b7cca9f6057691a
#5
2
I created d3-3d, a d3-plugin which helps you to visualize your 3d-data. Hopefully this helps to achieve your goal.
我创建了d3-3d，一个d3-plugin，它帮助您可视化您的3d数据。希望这有助于实现你的目标。
#6
1
Stefan Nieke has been more recently doing some cool stuff too with his d3-3d plugin: https://bl.ocks.org/Niekes
Stefan Nieke最近也做了一些很酷的事情，他的d3-3d插件:https://bl.ocks.org/Niekes。