2

データベースを読み取り、JSON を返す PHP スクリプトがあります (今のところ、グラフごとに 1 つの php ファイルがあります。より良い方法がわからないためです)。このデータは、D3 円グラフを埋めるために使用されます。私は20以上のチャートを持っているので、ユーザーが<div>. いくつかの調査を行ったところ、次のことがわかりました。

http://bl.ocks.org/j0hnsmith/5591116

この例は、私がやろうとしているもののほとんどですが、既存のコードに収まるようには見えません。これは私が持っているものに似た JSFiddle です (私の .JS コードはリンクの下にあります。違いはデータのロード方法です)。

http://jsfiddle.net/NYEaX/1/

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

var enterAntiClockwise = {
    startAngle: Math.PI * 2,
    endAngle: Math.PI * 2
};

d3.json("script.php", function (data) {
    var vis = d3.select("#chart")
        .append("svg:svg")
        .data([data])
            .attr("width", w)
            .attr("height", h)
        .append("svg:g")
            .attr("transform", "translate(" + (w * 0.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"),
    textBottom = vis.append("text")
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .attr("class", "textBottom");

    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 ).attr("y", -10)
                textBottom.text( d3.select(this).datum().data.value.toFixed(2) + "m").attr("y", 10);
            })
            .on("mouseout", function(d) {
                d3.select(this).select("path").transition()
                .duration(100)
                .attr("d", arc)

                textTop.text( "" );
                textBottom.text( "" );
            });

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

d3.selectAll("input").on("change", change);

/*
var timeout = setTimeout(function() {
    d3.select("input[value=\"oranges\"]").property("checked", true).each(change);
}, 2000);
*/

function change() {
    clearTimeout(timeout);
    path = path.data(pie(dataset[this.value]));

    path.enter().append("path")
        .attr("fill", function (d, i) {
        return color(i);
    })
    .attr("d", arc(enterAntiClockwise))
    .each(function (d) {
        this._current = {
            data: d.data,
            value: d.value,
            startAngle: enterAntiClockwise.startAngle,
            endAngle: enterAntiClockwise.endAngle
        };
    });

    path.exit()
        .transition()
        .duration(750)
        .attrTween('d', arcTweenOut)
        .remove() // now remove the exiting arcs

    path.transition().duration(750).attrTween("d", arcTween);
}

function arcTween(a) {
    var i = d3.interpolate(this._current, a);
    this._current = i(0);

    return function(t) {
        return arc(i(t));
    };
}

function arcTweenOut(a) {
    var i = d3.interpolate(this._current, {startAngle: Math.PI * 2, endAngle: Math.PI * 2, value: 0});
    this._current = i(0);

    return function (t) {
        return arc(i(t));
    };
}

どうすればこれを行うことができますか? 私はD3が初めてなので、ご容赦ください。

Pie Chart Update I & II (およびその他の例) も見つけましたが、私の評判が十分に高くないため、ここにリンクすることはできません。私もそれらを実装しようとしましたがd3.json、データをフェッチするために使用するものはなかったので、どうすればよいかわかりませんでした。

助けてくれてありがとう！

編集：ここに私のPHPがあります

<?php
$myServer = "servername";

$myDB = "dbname";

$conn = sqlsrv_connect ($myServer, array('Database'=>$myDB));

$sql ="SELECT col1 AS 'label', SUM(col2) AS 'value'
    FROM dbname.dbo.tablename
    GROUP BY col1";
$data = sqlsrv_query ($conn, $sql);   

$result = array();   

do {
    while ($row = sqlsrv_fetch_array ($data, SQLSRV_FETCH_ASSOC)) {
        $result[] = $row;   
    }
} while (sqlsrv_next_result($data));

echo json_encode ($result);

sqlsrv_free_stmt ($data);
sqlsrv_close ($conn); 
?>
4

0 に答える 0