3

所以我有一个已经在工作的 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}}

我已经有登录/会话/cookie 的东西与 jq 一起使用。我可以从我的 ajax api 请求数据，对其进行格式化，然后毫无问题地将其绘制到屏幕上。

所以我尝试使用 d3js 创建一个带有我在上面发布的第二个 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 中的饼图示例，并且图表呈现“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”中的键，但由于键是字符串而不是整数（如数组），我不知道该怎么做。

好的，所以我解决了我的问题。请参阅下面的答案，这是一个新问题，是否可以将标签移出馅饼？或翻车？

4

1 回答 1

5

我想到了。

创建标签：

labels = d3.keys(result.msg)

然后在第 31 行：

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

我在这段代码上花了一整天的时间，我一把它贴在这里我就明白了。哈哈

于 2012-10-31T15:37:25.530 回答