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

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()设置要用于不同类别的一系列颜色.下一行也访问图表中的默认轴对象,并将数字格式设置为两位十进制.您可以通过单击"实时代码"页面中的散点图选项来解决这些选项 .

遗憾的是,NVD3图表的制造商没有完整的文档,但描述了您可以为每个图表设置的所有其他选项.但是,您可以使用javascript本身来找出可用的方法.

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

打开一个加载d3和nvd3库的网页.他们网站上的实时代码页工作正常.然后打开开发人员的控制台命令行(这取决于您的浏览器,如果您还不知道如何,请搜索您的帮助页面).现在,在内存中创建一个新的nvd3散点图函数:

var testChart = nv.models.scatterChart();

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

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

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

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

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

• 尺寸(功能)
• sizeDomain(function)
• sizeRange(函数)

域和范围是D3标度使用的术语,因此这给了我一个关于它们的作用的提示.既然你不想缩放点,那么让我们先看看size属性.如果在控制台中键入以下内容:

testChart.size

它应该打印该函数的代码.它对于我们感兴趣的内容并不是非常有用,但它确实向我显示NVD3遵循D3的getter/setter格式:如果你打电话给.property(value)你将属性设置为该值,但如果你.property()没有任何参数调用,它将返回该财产的当前价值.

因此,要查找默认情况下size属性是什么,请调用size()不带参数的方法:

testChart.size()

它应该打印出来function (d) { return d.size || 1},它告诉我们默认值是一个在数据中查找size属性的函数,如果它不存在则返回常量1.更一般地说,它告诉我们由size设置的值method确定图表如何从数据中获取大小值.如果您的数据没有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

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