3

D3.js で作成した凡例付きの円グラフがあります。PHP ファイルは JSON を解析し、そのデータを使用してチャートを埋めます。凡例のラベルを正しい色と一致させることができないことを除いて、すべてが思い通りに機能します。これが私のコードです

var w = 490,
h = 400,
r = 180,
inner = 70,
color = d3.scale.category20c();

d3.json("script.php", function (data) {
    var max = d3.max(data, function(d) { return d.value; });
    var sum = d3.sum(data, function(d) { return d.value; });

    var vis = d3.select("#chart")
        .append("svg:svg")
        .data([data])
        .attr("width", w)
        .attr("height", h)
        .append("svg:g")
        .attr("transform", "translate(" + r * 1.5 + "," + (r + 10) + ")")

    var arc = d3.svg.arc()
        .innerRadius(inner)
        .outerRadius(r);

    var arcOver = d3.svg.arc()
        .innerRadius(inner + 5)
        .outerRadius(r + 5);

    var arcLine = d3.svg.arc()
        .innerRadius(inner)
        .outerRadius(inner + 5);

    var pie = d3.layout.pie()
        .value(function(d) { return d.value; });

    var textTop = vis.append("text")
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .attr("class", "textTop")
        .text( "TOTAL" )
        .attr("y", -10),
    textBottom = vis.append("text")
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .attr("class", "textBottom")
        .text(sum.toFixed(2) + "m")
        .attr("y", 10);

    var arcs = vis.selectAll("g.slice")
        .data(pie)
        .enter()
            .append("svg:g")
            .attr("class", "slice")
            .on("mouseover", function(d) {
                d3.select(this).select("path").transition()
                    .duration(100)
                    .attr("d", arcOver)

                textTop.text( d3.select(this).datum().data.label )
                textBottom.text( d3.select(this).datum().data.value.toFixed(2) + "m")
            })
            .on("mouseout", function(d) {
                d3.select(this).select("path").transition()
                    .duration(100)
                    .attr("d", arc);

                textTop.text( "TOTAL" )
                textBottom.text(sum.toFixed(2) + "m");
            });

    arcs.append("svg:path")
            .attr("fill", function(d, i) { return color(i); } )
            .attr("d", arc);

    var legend = d3.select("#chart").append("svg")
        .attr("class", "legend")
        .attr("width", 100)
        .attr("height", 350)
        .selectAll("g")
        .data(color.domain().slice().reverse())
        .enter().append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })

    legend.append("rect")
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

    legend.append("text")
        .attr("x", 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .text(function(d) { return d; });
})

JSFIDDLE

問題を に絞り込んだと思います.text(function(d) { return d; });。今のところ、インデックス番号を返すと仮定しています。この行を に変更する.text(function(d, i) { return data[i].label; });と、ラベルが色と適切に一致しなくなります。私はここからこの伝説を得ました。他の例も見ましたが (評判が悪いのでリンクできません)、適切に統合できませんでした。

誰かが何が間違っているかを理解するのを手伝ってくれますか? ありがとう！

4

1 に答える 1

13

ラベルを正しくするには、円グラフに使用するのと同じデータを凡例に渡します。

var legend = d3.select("#chart").append("svg")
  .attr("class", "legend")
  .attr("width", r)
  .attr("height", r * 2)
  .selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", function(d, i) { return color(i); });

legend.append("text")
  .attr("x", 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .text(function(d) { return d.label; });

ここでJsfiddle 。

于 2013-06-18T14:43:59.637 に答える