Question

这是json文件

{

＆＃34; name＆＃34;：＆＃34; Packages＆＃34;，

"children": [
    {
        "name": "Talks",
        "children": [
            {
                "name": "talk_1",
                "size": 722,
                "url": "www.example_1.com"
            },
            {
                "name": "talk_2",
                "size": 722,
                "url": "www.example_2.com"
            },
            {
                "name": "talk_3",
                "size": 722,
                "url": "www.example_3.com"
            }
        ]
    }
]

}

我想从上面的代码中绘制一个饼图。我想知道如何访问节点。我想根据值＆＃34; size＆＃34;创建一个饼图。提前致谢

Answer 1

修改：See this fiddle，分为another fiddle，found on stack overflow，using Google。根据我的理解，标签和所有内容，您的饼图或多或少都在这里。这需要大约5分钟的研究，而且d3几乎没有背景。只是说......在你问之前，你有没有尝试过？

对d3知之甚少但对Google很了解，我搜索了＆＃34; d3饼图＆＃34;并找到http://bl.ocks.org/mbostock/3887235。

然后我搜索了＆＃34; d3饼图json＆＃34;并找到了一个指向这个小提琴的Stack Overflow答案d3 piechart from local json variable。 http://jsfiddle.net/fg9MU/1/

现在，如果您想要动态更新，请查看此示例。 http://bl.ocks.org/mbostock/1346410

Google上确实有丰富的资源。

如果您需要有关特定案例的帮助，请按以下步骤进行操作：

定义图表对象及其外观
创建将对象映射到数字的函数
连接（1）和（2）

所以拼出来，

var dataFromYou = [
    {
        "name": "Talks",
        "children": [
            {
                "name": "talk_1",
                "size": 722,
                "url": "www.example_1.com"
            },
            {
                "name": "talk_2",
                "size": 722,
                "url": "www.example_2.com"
            },
            {
                "name": "talk_3",
                "size": 722,
                "url": "www.example_3.com"
            }
        ]
    }
];

var data = dataFromYou[0].children;

var width = 800,
    height = 250,
    radius = Math.min(width, height) / 2;

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

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

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



var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

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

    g.append("path")
        .attr("d", arc)
        .style("fill", function (d) {
        return color(d.data.name);
    });

    g.append("text")
        .attr("transform", function (d) {
        return "translate(" + arc.centroid(d) + ")";
    })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .text(function (d) {
        return d.data.size;
    });

如何从json文件中绘制d3饼图

1 个答案: