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 的新手，所以请多多包涵。

我还找到了饼图更新 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