Question

我试图通过读取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。

Answer 1

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

Answer 2

您无需将数据转换为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 }; }));

Answer 3

你不应该真正尝试通过连接来构建JSON，因为这很容易导致意外发生。根据你以后用字符串做的事情，它可以是一个附加你正在构建的东西的向量。使用浏览器JSON编码器......

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

这将在

中有效

IE8 +
Firefox 3.1+
Safari 4.0.3+
Opera 10.5 +
检查Can I Use

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

在D3 javascript中动态构建JSON

3 个答案: