3

だから、d3jsを使用するためのグラフを作成しようとしているjquery ajaxアプリケーションがすでに動作しています。私はjqにかなり精通していますが、これはd3を使用した最初のプロジェクトです.

そのため、jquery.ajax を使用して php スクリプト/mysql db から json でエンコードされたデータを要求する html ファイル。私のデータはすべて、次のような形式で返されます。

{"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で動作するログイン/セッション/クッキーのものを持っています. ajax API からデータを要求し、フォーマットして、問題なく画面に描画できます。

そのため、d3js を使用して、上に投稿した 2 番目の 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 リポジトリのパイの例を使用しており、チャートは「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]; });

私はこのコードを 1 日中ハッキングしましたが、ここに投稿するとすぐにわかりました。笑

于 2012-10-31T15:37:25.530 に答える