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

Question

所以我有一个已经工作的jquery ajax应用程序,我正在尝试创建使用d3js的图形.我对jq非常熟悉,但这是我使用d3的第一个项目.

所以,我的html文件使用jquery.ajax从php脚本/ mysql db请求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}}

我已经有使用jq登录/会话/ cookie的东西.我可以从我的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
    });
}

我正在使用d3js git repo中的pie示例,并且图表呈现为"ok",但在上面代码的第9行我正在调用:

data = d3.values(result.msg),

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

例如"18岁以下","18-23岁"等等......

这可能吗？
在第31行我正在设置文本:

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

但在这种情况下,"d"只是数值.我想我可以使用"i"来查找原始"result.msg"中的键,但由于键是字符串而不是整数(如数组),我不知道该怎么做.

好的,所以我解决了我的问题.看下面的答案,这是一个新问题,是否有可能将标签移出馅饼？还是翻滚？

Answer 1

我想到了.

创建标签:

labels = d3.keys(result.msg)

然后在第31行:

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

我在这段代码上攻击了一整天,我在这里发布它就知道了.大声笑