求使用D3制作图表课程源代码

来源:3-1 面积图表

feiyang

2015-06-25 15:04

请问这个课程有源代码吗?

写回答 关注

1回答

  • 晓琳GO
    2016-05-29 16:31:34

    js:

    3.csv("csv/data1.csv",type,function(data){
        console.log(data)
    
        var width = 400;
        var height = 400;
    
        //查找到最外层容器id=container的div中加入svg标签,并定义上宽和高
        var svg = d3.select("#container7").append("svg").attr("width",width).attr("height",height);
    
        var g = svg.append("g")
            .attr("transform","translate("+200+","+200+")");
    
        var arc_generator = d3.svg.arc()
            .innerRadius(100)
            .outerRadius(200);
            // .startAngle(0)
            // .endAngle(120*Math.PI/180);
    
        var angle_data = d3.layout.pie()
            .value(function(d){return d.population;});
    
        console.log(angle_data(data));
    
        var color = d3.scale.category10();
    
        g.selectAll("path")
            .data(angle_data(data))
            .enter()
            .append("path")
            .attr("d",arc_generator).style("fill",function(d,i){return color(i)});
    
        g.selectAll("text")
            .data(angle_data(data))
            .enter()
            .append("text")
            .text(function(d){return d.data.education})
            .attr("transform",function(d){return "translate("+arc_generator.centroid(d)+")"})
            .attr("text-anchor","middle")
            .style("font-weight","bold");
    });
    function type(d){
        d.population = +d.population;//这个样式可以将字符转成数值型
        return d;
    }


使用D3制作图表

教你使用最酷的数据可视化图表,初探数据可视化奥秘

37890 学习 · 112 问题

查看课程

相似问题