nvd3散点图圆圈大小不起作用答案

【问题标题】：nvd3 scatter chart circle size not workingnvd3散点图圆圈大小不起作用
【发布时间】：2014-04-15 19:49:44
【问题描述】：

我正在尝试更改散点图中圆圈的大小。我使用属性大小，但即使我将其更改为 10、100 等，圆圈的大小也不会增加。我尝试使用.sizeRange([minArea, maxArea]) 并且最大尺寸增加了。我无法理解size 如何影响可感知的尺寸。是相对大小吗？

编辑

如果你有

function(groups, points) {
var data = [],
  shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
  random = d3.random.normal();

for (i = 0; i < 1; i++) {
  data.push({
    key: 'Group ' + i,
    values: []
});

for (j = 0; j < 4; j++) {
     data[i].values.push({
        x: j
      , y: j
      , size: j
    });
  }
}
}

即使我们将 j 循环从 j<4 更改为 j<8，最大圆的大小保持不变。我们可以试试代码here。

【问题讨论】：

你能用你的代码更新问题吗？或者用你的代码链接到JSFiddle。
@shabeer90 请看我上面的编辑
看看这两个答案：stackoverflow.com/questions/20909793/… 和 stackoverflow.com/questions/21104118/… 在一起，它们应该可以帮助您解决问题。

标签： d3.js nvd3.js scatter-plot

【解决方案1】：

从1.7.1版本开始，是否可以使用属性pointRange([minArea,maxArea]):

在 javascript 对象中：

chart.pointRange([45,50]);

在 JSON 选项中：

chart:{
    ...
    pointRange:[45,50],
    ...
 }

对我来说，值 45 和 50 就足够了。

【讨论】：

【解决方案2】：

首先，您必须确保您拥有正确的新版本 (1.8.5) 脚本：

<link href="http://nvd3.org/assets/css/nv.d3.css" rel="stylesheet" type="text/css">
<script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>

然后，使用 sizeRange：

chart
.showDistX(true)
.showDistY(true)
 .color(d3.scale.category10().range())
 .size(1).sizeRange([100,100]);

这对我有用。话虽如此，这些形状在这个版本中不起作用。这是一个糟糕的绘图包。

【讨论】：