Javascript D3：如何为项目分配大小、颜色（碰撞检测可视化）

我是D3新手，基于D3js.io网站（）上的碰撞检测可视化示例构建了以下可视化

我希望能够在我的图表中指定10个球的大小和颜色，但我不知道如何做到这一点。目前，代码依赖于随机生成的大小，球都是黑色的。有人能解释一下我是如何做出这些改变的吗

理想情况下，我希望能够为10个球中的每个球指定十六进制代码和特定的px宽度

我的代码粘贴在下面，也在Codepen上：

提前感谢您的帮助

马特

可变宽度=500，
高度=400；
var nodes=d3.range（11）.map（函数（）{return{radius:Math.random（）*33+4}；}），
根=节点[0]，
颜色=d3.scale.category20（）；
根半径=80；
root.fixed=true；
var-force=d3.layout.force（）
.重力（0.05）
.charge（函数（d，i）{返回i？0:-2000；}）
.节点（节点）
.尺寸（[宽度、高度]）；
force.start（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
svg.selectAll（“圆圈”）
.数据（节点.切片（1））
.enter（）.append（“圆”）
.attr（“r”，函数（d）{返回d.radius；}）
.style（“fill”，函数（d）{返回d.color；}）；
强制开启（“勾选”），功能（e）{
var q=d3.几何四叉树（节点），
i=0，
n=节点长度；
而（++inx2 | x2ny2 | y2

您几乎拥有了它，但样式方法不合适。您应该更改为attr（'fill'），然后使用您的色阶：

svg.selectAll("circle")
  .data(nodes.slice(1))
  .enter().append("circle")
  .attr("r", function(d) { return d.radius; })
  .attr("fill", function(d) { return color(d.index);  });

---

你也可以对大小或任何你几乎拥有的东西做同样的选择，但是样式方法不合适。您应该更改为attr（'fill'），然后使用您的色阶：

svg.selectAll("circle")
  .data(nodes.slice(1))
  .enter().append("circle")
  .attr("r", function(d) { return d.radius; })
  .attr("fill", function(d) { return color(d.index);  });

---

您可以对大小或任何内容执行相同的操作，圆的半径和填充颜色在此代码中设置（特别是最后两行）：

半径直接来自数据，在该数据中生成如下：

{radius: Math.random() * 33 + 4}

var nodes = [{radius: 1}, {radius: 2}, ...];

要设置每个圆的特定半径，请更改返回的内容。如果要明确指定半径，请使用以下静态数据：

{radius: Math.random() * 33 + 4}

var nodes = [{radius: 1}, {radius: 2}, ...];

填充颜色也是如此。您可以向数据添加另一个属性来指定颜色（看起来您已经在尝试这样做了）：

---

圆的半径和填充颜色在此代码中设置（特别是最后两行）：

半径直接来自数据，在该数据中生成如下：

{radius: Math.random() * 33 + 4}

var nodes = [{radius: 1}, {radius: 2}, ...];

要设置每个圆的特定半径，请更改返回的内容。如果要明确指定半径，请使用以下静态数据：

{radius: Math.random() * 33 + 4}

var nodes = [{radius: 1}, {radius: 2}, ...];

填充颜色也是如此。您可以向数据添加另一个属性来指定颜色（看起来您已经在尝试这样做了）：

---

非常感谢。这真的很有帮助。你能再解释一下你在第二段代码中的意思吗，关于修改“code”{radius:Math.random（）*33+4}行？我已经做了您在下面提到的修改，但我不太清楚如何将随机生成的图形更改为指定的半径。嗯

Math.random（）*33+4

将返回一个随机数。如果将其替换为固定数字，则可以直接控制圆的半径。不需要对代码进行其他更改。谢谢。在您最初的解释中，您描述了我如何详细说明不同球的具体半径。因此，在本例中，如果我想指定10个形状明显的球，我不太清楚这两行应该如何读取code'.attr（“r”，函数（d）{返回d.radius；}）和'code'变量节点=[{radius:1}，{radius:2}，…]；再次感谢您的帮助。您想要不同的形状还是不同的半径？那么在数据中给出不同的数字就足够了。谢谢！这真的很有帮助。你能再解释一下你在第二段代码中的意思吗，关于修改“code”{radius:Math.random（）*33+4}行？我已经做了您在下面提到的修改，但我不太清楚如何将随机生成的图形更改为指定的半径。嗯

Math.random（）*33+4

将返回一个随机数。如果将其替换为固定数字，则可以直接控制圆的半径。不需要对代码进行其他更改。谢谢。在您最初的解释中，您描述了我如何详细说明不同球的具体半径。因此，在本例中，如果我想指定10个形状明显的球，我不太清楚这两行应该如何读取code'.attr（“r”，函数（d）{返回d.radius；}）和'code'变量节点=[{radius:1}，{radius:2}，…]；再次感谢您的帮助。您想要不同的形状还是不同的半径？那么在数据中给出不同的数字就足够了。谢谢！请原谅我的无知，但你能解释一下你所说的色阶是什么意思吗？我不明白，到底该如何建立一个，并让它在市场上得到认可