Javascript d3.v3所有圆半径相同的散点图

我发现的每个例子都显示所有散点图点都是随机半径的。有可能让它们都一样大吗？如果我尝试静态设置半径，所有的圆都将非常小（我假设默认半径）。但是，如果我像在大多数示例中一样使用Math.random（），则会有大小圆圈。我希望所有的圆圈都是大的。有办法吗？下面是使用Math.random（）形成图形数据的代码片段（出于某些原因，这可以正常工作）：

函数散点数据（扩展数据、yData）
{
var数据=[]；
对于（var i=0；i

---

random（）输出0到1之间的值，例如0.164259538891095和0.9842195005008699。我曾尝试将这些作为静态值放入“size”属性中，但不管是什么，圆圈总是非常小。有什么我遗漏的吗

半径以像素为单位测量。如果将其设置为小于1的值，则会有一个非常小的圆。大多数使用随机数的示例也使用比例因子

如果希望所有圆都具有恒定半径，则无需在数据中设置值，只需在添加“半径”属性时设置该值即可

不确定您正在查看哪些教程，但从这里开始：

“三个小圆圈”的例子很好地一步一步地介绍了使用圆圈可以做的不同事情：

---

更新：NVD3 API已经更改，现在使用

pointSize

、

pointSizeDomain

等，而不仅仅是

size

。在没有完整文档的情况下探索当前API的其余逻辑仍然适用

---

对于NVD3图表，您可以在调用该函数以在特定容器元素中绘制图表之前，通过调用图表函数本身（或其公共组件）上的方法来完成所有调整

例如，在您链接的示例中，图表函数的初始化方式如下：

 var chart = nv.models.scatterChart()
               .showDistX(true)
               .showDistY(true)
               .color(d3.scale.category10().range());

 chart.xAxis.tickFormat(d3.format('.02f'));
 chart.yAxis.tickFormat(d3.format('.02f'));

for (keyname in testChart.xAxis){console.log(keyname + " (" + typeof(testChart.xAxis[keyname]) + ")");}

 var chart = nv.models.scatterChart()
               .showDistX(true)
               .showDistY(true)
               .color(d3.scale.category10().range())
               .size(1);

 chart.xAxis.tickFormat(d3.format('.02f'));
 chart.yAxis.tickFormat(d3.format('.02f'));

.showDistX（）

和

.showDistY（）

打开轴上的记号分布

.color（）

设置要用于不同类别的颜色系列。下一行访问图表中的默认轴对象，并将数字格式设置为两位小数。您可以通过单击中的“散点图”选项来使用这些选项

不幸的是，NVD3图表的制造商们还没有为每张图表描述所有其他可以设置的选项。但是，您可以使用javascript本身来找出可用的方法

检查NVD3.js图表对象以确定选项 打开加载d3和nvd3库的网页。他们网站上的软件运行良好。然后打开开发人员的控制台命令行（这取决于您的浏览器，如果您还不知道如何搜索帮助页面）。现在，在内存中创建一个新的nvd3散点图函数：

var testChart = nv.models.scatterChart();

在我的（Chrome）控制台上，控制台将打印出您刚刚创建的函数的全部内容。它很有趣，但很长，很难一目了然地解释。而且大部分代码都是封装的，因此您无法轻松更改它。您想知道可以更改哪些属性。因此，在控制台的下一行中运行以下代码：

for (keyname in testChart){console.log(keyname + " (" + typeof(testChart[keyname]) + ")");}

控制台现在应该整洁地打印出您可以从该图表函数访问的所有方法和对象的名称。其中一些将有自己的方法和对象，您可以访问；通过运行相同的例程发现它们是什么，但将

testChart

替换为

testChart.propertyName

，如下所示：

 var chart = nv.models.scatterChart()
               .showDistX(true)
               .showDistY(true)
               .color(d3.scale.category10().range());

 chart.xAxis.tickFormat(d3.format('.02f'));
 chart.yAxis.tickFormat(d3.format('.02f'));

for (keyname in testChart.xAxis){console.log(keyname + " (" + typeof(testChart.xAxis[keyname]) + ")");}

 var chart = nv.models.scatterChart()
               .showDistX(true)
               .showDistY(true)
               .color(d3.scale.category10().range())
               .size(1);

 chart.xAxis.tickFormat(d3.format('.02f'));
 chart.yAxis.tickFormat(d3.format('.02f'));

---

回到你的问题上来。我在上面建议的小例程不会按任何顺序对属性名称进行排序，但是浏览列表时，您应该会看到三个与大小相关的选项（这是示例用于设置半径的数据变量）

• 大小（功能）
• sizeDomain（功能）
• 尺寸标注（功能）

域和范围是由使用的术语，因此这给了我一个关于它们的作用的提示。因为您不想缩放点，所以让我们从查看size属性开始。如果在控制台中键入以下内容：

testChart.size

它应该打印回该函数的代码。对于我们感兴趣的内容，它并没有提供太多的信息，但它确实告诉我NVD3遵循D3的getter/setter格式：如果调用

.property（value）

将属性设置为该值，但是如果调用

.property（）

而没有任何参数，它将返回该属性的当前值

因此，要了解默认情况下size属性是什么，请调用不带参数的

size（）

方法：

testChart.size()

它应该打印出

函数（d）{return d.size | | 1}

，它告诉我们默认值是一个在数据中查找size属性的函数，如果它不存在，则返回常量1。更一般地说，它告诉我们size方法设置的值决定了图表如何从数据中获取size值。如果您的数据没有

d.size

属性，则默认值应给出一个常量大小，但是为了更好地度量，您应该调用

chart.size（1）

在初始化代码中告诉图表函数不要费心从数据中确定大小，只需使用一个常量值

回到实时代码散点图可以检验这一点。编辑要添加到大小调用中的代码，如下所示：

 var chart = nv.models.scatterChart()
               .showDistX(true)
               .showDistY(true)
               .color(d3.scale.category10().range());

 chart.xAxis.tickFormat(d3.format('.02f'));
 chart.yAxis.tickFormat(d3.format('.02f'));

for (keyname in testChart.xAxis){console.log(keyname + " (" + typeof(testChart.xAxis[keyname]) + ")");}

 var chart = nv.models.scatterChart()
               .showDistX(true)
               .showDistY(true)
               .color(d3.scale.category10().range())
               .size(1);

 chart.xAxis.tickFormat(d3.format('.02f'));
 chart.yAxis.tickFormat(d3.format('.02f'));

添加