问

如何使用D3js将图例添加到饼图？以及如何集中饼图？

滨州电信1988_259 发布于 2023-02-09 12:11

http

css

function

svg

这是我运行http://bl.ocks.org/ZJONSSON/3918369的例子但你需要d3.legend.js,你应该能够找到该链接.添加它然后做三件事.

1.为图例添加一个css类

.legend rect {
 fill:white;
 stroke:black;
 opacity:0.8; }

第2位.将attr:data-legend添加到g.append("path")

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

3.一些在此之后继续将这个人放在那里

legend = svg.append("g")
            .attr("class", "legend")
            .attr("transform", "translate(50,30)")
            .style("font-size", "12px")
            .call(d3.legend)

那么你应该有一个很好的简单传奇.如果要将其居中,请在创建图例时使用translate中的值(50,30).

这是你应该最终得到的. 在此输入图像描述

1 个回答

这是我运行http://bl.ocks.org/ZJONSSON/3918369的例子但你需要d3.legend.js,你应该能够找到该链接.添加它然后做三件事.

1.为图例添加一个css类
```
.legend rect {
 fill:white;
 stroke:black;
 opacity:0.8; }
```
第2位.将attr:data-legend添加到g.append("path")
```
        g.append("path")
            .attr("d", arc)
            .attr("data-legend", function(d){return d.data.name})
            .style("fill", function (d) { return color(d.data.name); });
```
3.一些在此之后继续将这个人放在那里
```
legend = svg.append("g")
            .attr("class", "legend")
            .attr("transform", "translate(50,30)")
            .style("font-size", "12px")
            .call(d3.legend)
```
那么你应该有一个很好的简单传奇.如果要将其居中,请在创建图例时使用translate中的值(50,30).

这是你应该最终得到的.
2023-02-09 12:14 回答

Sally-__

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签