0

我正在尝试通过从 D3-javascript 中的数组读取来动态构建 JSON。（下面的代码不是我使用的实际代码，但与此类似）

 radius = [10,20,30];
   jsonradius = '[{';
   for i = 0 to radius.length {
       jsonradius += '"radius":';  
       jsonradius += 'radius[i]';
       jsonradius += ',';
   }
   jsonradius += '}]';

使用标志我确保逗号没有放在最后一个条目之后，并且当我使用 text(jsonradius) 函数打印时，它会以完美的 JSON 形式出现。'[{"radius":10,"radius":20,"radius":30}]'

但是当我尝试如下访问它时，没有返回任何值。

'd3.selectAll("circle").data(jsonradius).enter().select("circle").attr("r",function(d){return d.radius;});'

我是 d3 和 javascript 的新手。请帮助如何动态构建 json。

4

3 回答 3

1

您的 JSON 对象包含 3 个具有相同名称的字段。这是一个错误。它必须是这样的：'[{"radius":10},{"radius":20},{"radius":30}]'

于 2013-11-04T08:27:18.330 回答
0

您无需将数据转换为 JSON 即可通过d3.

你想要的可以使用radius数组本身来完成：

d3.selectAll("circle").data([10, 20, 30]) // Use your array here
  .enter()
  .append('circle')  // not .select('circle')
  .attr('r', function (d) { return d; })
  // other properties.

而且，为了完整起见，您可以使用JSON.strinfigy将字符串转换为 JSON 和从 JSON 转换：

jsonRadius = JSON.stringify(radius.map(function (r) { return { radius: r }; }));
于 2013-11-04T10:24:40.560 回答
0

您不应该真正尝试通过连接来构建 JSON，因为这很容易导致意外发生。根据您稍后对字符串所做的操作，它可能是一个向量来附加您正在构建的任何内容。使用浏览器 JSON 编码器...

radius = [10,20,30];
data = radius.map(function(d){return {radius: d};});
JSON.stringify(data);

这将适用于

  • IE8+
  • 火狐 3.1+
  • Safari 4.0.3+
  • 歌剧 10.5+
  • 在Can I Use查看其他浏览器

如果您需要支持没有内置解析支持的浏览器，请考虑使用经过良好测试的解决方案来进行编码，以便进行正确的清理。一个很好的例子是json2.js，它检测是否没有本地解决方案，如果需要，它会“polyfils”它自己的解决方案。

于 2013-11-04T11:39:52.847 回答