D3弧生成器

最新推荐文章于 2025-03-13 20:49:20 发布

Brave_liberty

最新推荐文章于 2025-03-13 20:49:20 发布

阅读量1.3k

点赞数

分类专栏： d3可视化

本文链接：https://blog.youkuaiyun.com/qq_31396185/article/details/79759844

版权

d3可视化专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何利用D3.js库生成各种弧形图形，包括饼图、甜甜圈图等。通过理解D3的arc生成器函数，你可以自定义弧的开始角度、结束角度、半径以及数据绑定等属性，实现动态和交互式的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style type="text/css">
body {
    background-color: #045e93;
}

.tooltip {
        position: absolute;
        width: 130px;
        height: auto;
        background-color: steelblue;
        font-size: 20px;
        border-radius: 5px;
        pointer-events: all;
    }

text {
            font-family: sans-serif;
            font-size: 12px;
            fill:black;
        }

</style>
<body>

</body>
<script type="text/javascript">
// var dataset = [ 5, 10, 20, 45, 6, 25 ];
var dataset = [ ["huawei",90],["xiaomi",100],["zhongxing",120],["sanxing",105],["nokia",116],["htc",150], ["zhang",200],["wang",180],
                ["huawei",300],["xiaomi",123],["zhongxing",140],["sanxing",125],["nokia",216]];
var w=600;
var h=600;
var outerRadius=w/3;
var innerRadius=w/7
/*设定半径*/
var arc=d3.svg.arc()
              .innerRadius(innerRadius)
              // .outerRadius(outerRadius)
/*定义一个pie,用layout包裹数据，设value访问器，决定包裹dataset的什么数据*/
var pie=d3.layout.pie()
                 .startAngle(Math.PI*0)
                 .endAngle(Math.PI*2)
                 .value(function(d){return d[1]});   //value访问器决定我们要访问数据集中的什么数据，同时在pie（dataset)也会有

var color=d3.scale.category10();

var svg=d3.select("body")
          .append("svg")
          .attr("width",w)
          .attr("height",h)
console.log(pie(dataset));
/*开始对每个扇形（startAngle,endAngle,value）进行绑定,放在透明g元素中*/
var arcs=svg.selectAll("g.arc")
            .data(pie(dataset))
            .enter()
            .append("g")
            .attr("class","arc")
            .attr("transform","translate("+w/2+","+w/2+")")//放到svg中心
/*为每个g以弧参数生成路径*/
/*d当用布局的时候，就不需要再用路径生成器包裹数据了*/
arcs.append("path")
    .attr("fill",function(d,i){
        return color(i);
    })
    .attr("d",function(d){
        arc.outerRadius(d.value);
        return arc(d);
    });
console.log(arc.outerRadius())

arcs.append("text")
    .attr("transform",function(d){
        arc.outerRadius(d.value)

        console.log(arc.centroid(d))
        var x=arc.centroid(d)[0];
        var y=arc.centroid(d)[1];
        return "translate("+x+","+y+")";
    })
    .attr("text-anchor","middle")
    .text(function(d){
        return d.value;
    })
/*添加弧wait文字*/

arcs.append("line")
    .attr("stroke","black")
    .attr("x1",function(d){
        arc.outerRadius(d.value)
        return  arc.centroid(d)[0]*2*d.value/(d.value+innerRadius);
    })
    .attr("y1",function(d){
        arc.outerRadius(d.value)
        return arc.centroid(d)[1]*2*d.value/(d.value+innerRadius);
    })
    .attr("x2",function(d){
        arc.outerRadius(d.value)
        return arc.centroid(d)[0]*1.8;
    })
    .attr("y2",function(d){
        arc.outerRadius(d.value)
        return arc.centroid(d)[1]*1.8;
    })

// arcs.append("line")
//     .attr("stroke","black")
//     .attr("x1",function(d){
//      arc.outerRadius(d.value)
//      return  arc.centroid(d)[0]*2.4;
//     })
//     .attr("y1",function(d){
//      arc.outerRadius(d.value)
//      return arc.centroid(d)[1]*2.4;
//     })
//     .attr("x2",function(d){
//      arc.outerRadius(d.value)
//      return arc.centroid(d)[0]*3;
//     })
//     .attr("y2",function(d){
//      arc.outerRadius(d.value)
//      return arc.centroid(d)[1]*2.4;
//     })

// arcs.append("text")
//  .attr("transform",function(d){
//      var x=arc.centroid(d)[0]*2.8;
//      var y=arc.centroid(d)[1]*2.4;
//      return "translate("+x+","+y+")";
//  })
//  .text(function(d){
//      return d.data[0];
//  })

    /*添加div提示框*/
var tooltip=d3.select("body")
   .append("div")
   .attr("class","tooltip")
   .attr("opacity",0)


arcs.on("mouseover",function(d,i){
    tooltip.html("value:"+d.value)
           .style("left",d3.event.pageX+"px")
           .style("top",d3.event.pageY+"px")
           .style("opacity",1)

    tooltip.style("box-shadow","10px 0px 0px"+color(i))//添加尾部阴影
})
.on("mousemove",function(d){
    tooltip.style("left",d3.event.pageX+"px")
            .style("top",d3.event.pageY+"px")
})
.on("mouseout",function(d){
    tooltip.style("opacity",0);
})
</script>

这里写图片描述