D3饼图太凹陷了

时间:2016-09-05 04:16:42

标签: asp.net-mvc d3.js

我得到一个糟糕渲染的饼图。为什么会这样?我做错了吗?我能做些什么来拥有更好的边界?我正在使用v3.5.17。

Pie chart too dented

var w = 500,
            h = 500;

            //var data = [10, 80, 50, 60, 30, 42, 27, 77];

            var max = d3.max(data);
            var min = d3.min(data);

            var color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

            console.log(color(50));

            var canvas = d3.select("#piegraphic").append("svg")
                .attr("width", w)
                .attr("height", h);


            var group = canvas.append("g")
                .attr("transform", "translate(200, 200)");

            var r = 150;

            var arc = d3.svg.arc()
                .outerRadius(r - 10)
                .innerRadius(0);

            var arc2 = d3.svg.arc()
                .outerRadius(r + 10)
                .innerRadius(0);


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

            var arcs = group.selectAll(".arc")
                .data(pie(data))
                .enter()
                .append("g")
                .attr("class", "arc");

            var asdf = arcs.append("path")
                .attr("d", arc)
                .attr("fill", function (d) {
                    return color(d.data);
                })


            asdf.on("mouseover", function (d) {
                d3.select(this).transition().duration(200).attr("d", arc2);
            });

            asdf.on("mouseout", function (d, i) {
                d3.select(this).transition().duration(200).attr("d", arc);
            });

            var circle = group.append("circle")
                .attr({
                    "cx": 0,
                    "cy": 0,
                    "r": 140,
                    "fill": "none",
                    "stroke": "#fff",
                    "stroke-width": 2
                });

我尝试了其他方法,但我总是得到相同的结果,我不知道我还能尝试什么。提前致谢

修改 我的数据如下:

[{count:106136313.3, label : "RR" },{count:136313.3, label : "RA" },{count:1061313.3, label : "TE" }]

0 个答案:

没有答案