为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

正在回答

1 回答

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;
}


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信