Question

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

function scatterData(xData, yData) 
{
  var data = [];

  for (var i = 0; i < seismoNames.length; i++) 
  {
    data.push({
      key: seismoNames[i],
      values: []
    });

    var xVals=""+xData[i];
    xVals=xVals.split(",");
    var yVals=""+yData[i];
    yVals=yVals.split(",");

    for (var j = 0; j < xVals.length; j++) 
    {
      data[i].values.push({
        x: xVals[j], 
        y: yVals[j], 
        size: Math.random()
      });

    }
  }

  return data;
}

Math.random（）吐出0到1之间的值，例如0.164259538891095和0.9842195005008699。我已经尝试将这些作为静态值放在'size'属性中，但不管圆圈总是很小。有什么我想念的吗？

Answer 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'));

.showDistX()和.showDistY()打开轴上的刻度线分布; .color()设置您要用于不同类别的一系列颜色。下一行也访问图表中的默认轴对象，并将数字格式设置为两位十进制。您可以通过单击"Live Code" page中的散点图选项来使用这些选项。

不幸的是，NVD3图表的制作者don't have a complete documentation可用，但描述了您可以为每个图表设置的所有其他选项。但是，您可以使用javascript本身来找出可用的方法。

检查NVD3.js图表对象以确定选项

打开一个加载d3和nvd3库的网页。他们网站上的live code page运行正常。然后打开开发人员的控制台命令行（这将取决于您的浏览器，如果您还不知道如何，请搜索您的帮助页面）。现在，在内存中创建一个新的nvd3散点图函数：

var testChart = nv.models.scatterChart();

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

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

控制台现在应该整齐地打印出您可以从该图表功能访问的所有方法和对象的名称。其中一些将有自己的方法和对象，您可以访问;通过运行相同的例程来发现它们是什么，但将testChart替换为testChart.propertyName，如下所示：

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

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

尺寸（功能）
sizeDomain（function）
sizeRange（function）

域名和范围是D3 scales使用的术语，因此我可以提示他们做了什么。既然你不想缩放点，那么让我们先看一下size属性吧。如果在控制台中键入以下内容：

testChart.size

应打印该功能的代码。它对我们感兴趣的内容并不是非常有用，但它确实告诉我NVD3遵循D3的getter / setter格式：如果你调用.property(value)，你将属性设置为值，但是如果你在没有任何参数的情况下调用.property()，它将返回该属性的当前值。

因此，要找出默认情况下的size属性，请调用size()方法，不带参数：

testChart.size()

它应该打印出function (d) { return d.size || 1}，它告诉我们默认值是一个在数据中查找size属性的函数，如果它不存在则返回常量1.更一般地说，它告诉我们size方法设置的值决定了图表如何从数据中获取大小值。如果您的数据没有d.size属性，则默认值应该给出一个常量大小，但是为了更好地衡量，您应该在初始化代码中调用chart.size(1);来告诉图表函数不要试图从数据中确定大小并且只使用一个常数值。

回到实时代码散点图可以测试出来。编辑代码以添加大小调用，如下所示：

 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'));

添加额外的调用成功地将所有点设置为相同的大小 - 但该大小绝对不是1像素，因此显然有一些缩放。

首先想要获得更大的点是将chart.size(1)更改为chart.size(100)。然而，没有任何改变。默认比例显然是基于数据计算它的域，然后输出到标准的大小范围。这就是为什么你不能通过将每个数据元素的大小值设置为0.99来获得大圆圈的原因，即使在某些数据为0.01且某些数据为0.99时会产生大圆圈。显然，如果要更改输出大小，您还必须在图表上设置.sizeRange()属性。

在控制台中调用testChart.sizeRange()以找出默认值并不具备相关信息：默认值为null（不存在）。所以我只是猜测，与D3线性标度.range()函数相同，预期输入是由max和min值组成的双元素数组。因为我们想要一个常数，所以max和min将是相同的。所以在实时代码中我改变了：

.size(1);

到

.size(1).sizeRange([50,50]);

现在发生了一些事情！但是这些点仍然很小：绝对不是半径50像素，它看起来更接近50平方像素的面积。根据区域计算大小是有意义的，从数据大小调整，但这意味着要设置一个恒定的大小，你需要找出你想要的大概区域：最多200的值看起来不错，但是您选择的值取决于图表的大小以及数据点彼此之间的距离。

- ABR

P.S。我在你的问题中添加了NVD3.js标签;在询问有关NVD3图表功能的问题时，请务必将其用作主标签。

Answer 2

半径以像素为单位。如果将其设置为小于1的值，是的，您将拥有一个非常小的圆圈。大多数使用随机数的示例也使用缩放因子。

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

不确定您正在查看哪些教程，但从这里开始：https://github.com/mbostock/d3/wiki/Tutorials

“三个小圈子”的例子可以很好地逐步说明你可以用圈子做的不同事情： http://mbostock.github.io/d3/tutorial/circle.html

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

2 个答案:

检查NVD3.js图表对象以确定选项

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

2 个答案:

检查NVD3.js图表​​对象以确定选项

检查NVD3.js图表对象以确定选项