从jquery ajax d3js饼图 - 关联json键和图表上的值

所以我有一个已经工作的jquery ajax应用程序，我试图创建使用d3js图。我对jq非常熟悉，但这是我第一个使用d3的项目。从jquery ajax d3js饼图 - 关联json键和图表上的值

因此，我的html文件使用jquery.ajax从php脚本/ mysql数据库请求json编码的数据。我的所有数据返回的格式与此类似：

{"status":"Failed","msg":"Bad request."}

，或者如果它的数据是这样的（这是用户的年龄细分）：

{"status":"Found","msg":{"under_18":103,"18-23":841,"24-29":1436,"30-36":1058,"37-46":907,"47-56":483,"over_56":200}}

我已经有登录/ session/cookie与jq一起工作。我可以从我的ajax api请求数据，格式化它，并将它绘制到屏幕上，没有任何问题。

所以即时通讯尝试使用d3js创建一个饼图w /第二json blob我张贴上面。这里是一个代码剪断我的工作：

function ageDemographics() { 
    closure(
     'action=ageDemographics', 
     function(result) { 
      var width = 200, 
       height = 200, 
       outerRadius = Math.min(width, height)/2, 
       innerRadius = outerRadius * .6, 
       data = d3.values(result.msg), 
       color = d3.scale.category20(), 
       donut = d3.layout.pie(), 
       arc = d3.svg.arc().innerRadius(0).outerRadius(outerRadius); 
      var vis = d3.select("#ageDemographics") 
       .append("svg") 
       .data([data]) 
       .attr("width", width) 
       .attr("height", height); 
      var arcs = vis.selectAll("g.arc") 
       .data(donut) 
       .enter().append("g") 
       .attr("class", "arc") 
       .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); 
      arcs.append("path") 
       .attr("fill", function(d, i) { return color(i); }) 
       .attr("d", arc); 
      arcs.append("text") 
       .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
       .attr("dy", ".35em") 
       .attr("text-anchor", "middle") 
       .attr("display", function(d) { return d.value > .15 ? null : "none"; }) 
       .text(function(d, i) { return d.value.toFixed(2); }); 
     }, 
     function(xhr, status, thrown) { 
      setupLoginForm(); 
      $('#error').html('You have been logged out.<br class="clear"/><br/>');      
     } 
    ); 
} 
function closure(data, success, error) { 
    $.ajax({ 
     type: "POST", 
     url: 'http://localhost/analytics/api/ajax.php', 
     data: data, 
     cache: false, 
     success: success, 
     error: error 
    }); 
}

我使用的pie example from the d3js git repo和图表呈现“OK”，但在上面的代码行＃9我打电话：

data = d3.values(result.msg),

拉出d3的值以生成饼图。但馅饼上的标签是我给它的值，但我想要显示的是键。

例如“18岁以下”，“18-23岁”等等...

这是可能的吗？
上线＃31我设置与文本：

.text(function(d, i) { return d.value.toFixed(2); });

但在这种情况下，“d”只是数值。我想我可以使用“我”来查找原来的“result.msg”中的键，但由于键是字符串不是整数（如数组），我不知道如何做到这一点。

好吧，所以我解决了我的问题。看到我的答案在下面，这里有一个新的问题，是否有可能将标签移出馅饼？或翻车？

来源

2012-10-31 xero

我想通了。

创建标签：

labels = d3.keys(result.msg)

然后在第31行：

.text(function(d, i) { return labels[i]; });

我砍死这个代码了整整一天，只要我张贴在这里，我想通了。大声笑

来源

2012-10-31 15:37:25 xero

我很感兴趣，因为我想做类似的事情，但更复杂，我是初学D3js。你能告诉我一些例子如何动态（通过AJAX）改变D3js可视化？使用setInterval函数。 – Kamil

@kamylko我通过jquery ajax调用我的ajax，然后将生成的JSON blob传递给d3函数。我在考试中删除了那部分内容，因为它与我的问题没有直接关系。 – xero

从jquery ajax d3js饼图 - 关联json键和图表上的值

回答

相关问题