我正在搜索具有 3 维（x、y 和 z） 并使用 D3.js 的图表。请让我知道是否有任何数据可视化网站可以找到这样的图表，或者d3js.org 上是否有我以某种方式错过的图表。
【问题讨论】：
标签： javascript d3.js svg graph 3d
由 VividD 和 Lars Kotthoff 链接到的 3D 散点图可能是您所要求的最佳示例，但我会反驳并建议您可能问错了问题。
试图在平面屏幕上模拟三个空间维度总是不完美的，并且难以读取数据。但是，在 D3 中绘制三个不同的 data 维度非常容易。您对两个数据变量使用水平和垂直布局，然后对第三个变量使用大小、形状、颜色或阴影。
如果所有三个数据变量都最好用连续数字表示，那么最好的方法是使用气泡散点图，其中三个显示维度是水平位置、垂直位置和气泡大小。
这是一个示例，它还使用在线交互组件添加通过运动显示的第四个维度：
Bubble Scatterplot -- click for original
您说您的三个维度是客户、产品和内容。我不知道“内容”是什么类型的值（数字或类别），但我很确定“客户”和“产品”是类别。
这是一个示例，其中使用两个分类维度来布置表格，然后表格的每个单元格都包含一个由第三个数字维度调整大小的圆圈。如果您的第三个变量是一个类别，您可以使用一个形状来指示每对“客户”和“产品”对应的“内容”类型（如果有的话）：
(来源：fastly.net)
气泡矩阵 -- 点击查看原文](http://neuralengr.com/asifr/journals/)
这是另一个，其中第三维以颜色而不是大小显示。颜色表示一个连续变量，但您可以轻松选择一组高对比度的颜色来表示类别：
Colour Matrix -- click for original
当然，一个普通的堆叠条形图是另一种显示两个类别和一个数字数量的方式：
Stacked Bar Graphs -- click for original
而且您不必停留在三个数据变量上。如果其中两个数据变量是您不介意分组的类别或数字，则可以使用“小倍数”方法绘制四个变量，在该方法中创建一个表示类别变量的表，然后重复每个表格单元格内的其他两个变量。
像这样：
Scatterplot Matrix -- click for original
或者这个（星期和星期几是数据的两个维度，类别/数量是另外两个）：
Pie Chart Small Multiples -- click for original
我希望这给了你很多想法......
【讨论】：
一种类似于你所寻求的例子是：
请注意，此示例使用了X3DOM，这是一种在 HTML 中标准化 3D 呈现的相当新的尝试，并非所有浏览器都支持。
在 X3DOM 中使用 D3.js 的一些额外测试示例：
在 D3 Google 组中搜索 X3DOM。
另一种可能有趣的方法是使用 D3.js 和 Three.js，如下所示：
Showing GPS tracks in 3D with three.js and d3.js
一般来说，D3.js 更倾向于数据可视化而不是科学可视化，这意味着它没有广泛支持显示 3D 空间（显示地理 3D 数据除外，D3.js 非常支持方式，但这不是需要的）。
例如（此示例与您的示例没有直接关系，仅用于说明）：D3 提供了用于 2D 绘制树木的算法，但不提供任何用于 3D 放置树木以及随后在2D 屏幕。
如果您不限于 D3.js，也许您可以使用其他库更轻松、更快地实现相同的目标，这些库专门为类似于您的目的而编写。例如，您可以使用Pre3D。看看这个example。 Pre3D 不使用 X3DOM，只是在 2D 画布上呈现纯 HTML。我认为它的 3D 图形的动画（旋转）比第一个 D3/X3DOM 示例中的更平滑。
【讨论】：
我创建了d3-3d，这是一个 d3 插件，可帮助您可视化您的 3d 数据。希望这有助于您实现目标。
【讨论】：
我能找到的最好的例子（都非常简单）是：
Highcharts（3d 散点图）
http://www.highcharts.com/demo/3d-scatter-draggable
Vis.js（各种 3d 选项，例如条形和点）
示例 https://ww3.arb.ca.gov/ei/tools/lib/vis/examples/graph3d/playground/
文档 https://ww3.arb.ca.gov/ei/tools/lib/vis/docs/graph3d.html
只需提供 x、y 和 z 坐标，设置你喜欢的配置，然后你就笑了。
【讨论】：
这里是纯javascript+svg解决方案
let f = (x, z) => Math.cos(z/20)*20 + Math.sin(x/10)*10 + x/3*Math.atan2(z,x);
let cos = Math.cos, sin = Math.sin, xyz = 'xyz'.split(''),
k = 500, a1 = 0, a2 = 0, far = 300, p, w, h, a,
points = [], lines = [], s = 100;
for (var x = -s; x < s; x += 5)
for (var z = -s; z < s; z += 5)
points.push({x, z, r:2});
for (var i = 0; i < 6; i++) lines.push([
{x:-s, y:-s, z:-s, color:`hsl(${i*120},55%,55%)`, state:{}},
{x:i%3==0?s:-s, y:i%3==1?s:-s, z:i%3==2?s:-s, state:{}}
]);
points.forEach(d=>d.state={fill:`rgb(${d.x+s},${(d.y=f(d.x,d.z))+s},${d.z+s})`});
pointsGroup.innerHTML=points.map((d,i)=>`<circle ind="${i}"></circle>`).join('');
linesGroup.innerHTML=lines.map(d=>`<path stroke="${d[0].color}"></path>`).join('');
let circles = pointsGroup.querySelectorAll('circle');
let paths = linesGroup.querySelectorAll('path');
function project(p) {
let x = p.x*cos(a1) + p.z*sin(a1);
let z = p.z*cos(a1) - p.x*sin(a1);
let y = p.y*cos(a2) + z*sin(a2);
let d = z*cos(a2) - p.y*sin(a2) + far;
p.state.cx = (k/d)*x + w/2;
p.state.cy = (k/d)*y + h/2;
p.state.r = far/d*p.r;
}
function render() {
if (a) for (var i=0; i<3; i++)
xyz.forEach((c, j) => lines[i][0][c] = i==j ? -s : (lines[i][1]=a)[c]);
points.forEach(project);
points.sort((a, b) => a.state.r - b.state.r);
lines.forEach(line => line.forEach(project));
points.forEach((d, i) => Object.entries(d.state)
.forEach(e => circles[i].setAttribute(...e)));
lines.forEach((l, i) => paths[i].setAttribute('d',
`M${l[0].state.cx} ${l[0].state.cy} L${l[1].state.cx} ${l[1].state.cy}`));
}
let evt = (t, f) => addEventListener(t, e => render(f(e)));
evt('click', e => a = points[e.target.getAttribute('ind')])
evt('wheel', e => k *= 1 - Math.sign(e.deltaY)*0.1);
evt('mouseup', e => p = null);
evt('mousedown', e => p = {x: e.x, y: e.y, a1, a2});
evt('mousemove', e => p && (a1 = p.a1-(e.x-p.x)/100) + (a2 = p.a2-(e.y-p.y)/100));
evt('resize', e=>svg.setAttribute('viewBox',`0 0 ${w=innerWidth} ${h=innerHeight}`));
dispatchEvent(new Event('resize'));<svg id="svg" stroke-width="2"><g id="pointsGroup"></g><g id="linesGroup"></g></svg>【讨论】：
看起来更恰当地说是“3D”的新示例已经问世。 http://bl.ocks.org/supereggbert/aff58196188816576af0
这是我做出的改编：
【讨论】：
Stefan Nieke 最近也在用他的 d3-3d 插件做一些很酷的事情：https://bl.ocks.org/Niekes
【讨论】：