我可以在没有外部数据文件的情况下制作圆环图吗?

我一直在试图理解为什么一个特定的可视化没有按照我想要的方式出现。我见过的例子，比如这个和这个，都使用其他文件(无论是json，csv还是tsv(。是否可以在没有甜甜圈的情况下制作甜甜圈，而像我一样将数据放在"标签"变量中？没有很多数据可以使用，csv/tsv 文件实际上没有存储的地方。

我的代码如下。理想情况下，它应该只是一个甜甜圈，标签名称附加到每个扇区，例如，一个蓝色扇区，上面写着"翻译"。提前谢谢你！

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<!--<title>D3 Visualization></title>-->
<script src="https://d3js.org/d3.v3.min.js"></script>
<!--Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet" />
<!--CSS Styling-->
<style>
    body {
        font-family: 'Special Elite', cursive;
    }
    .arcstyle {
        stroke: white;
        font: 0.5em;
    }
</style>
<body>
    <script type="text/javascript">
        var w = 1000;
        var h = 1000;
        var svgBody = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h);
        //Doing the connection of tags to annulus
        var tags = [{
            tag: "translation",
            authors: "smith",
            tcolor: "blue"
        }, {
            tag: "code",
            authors: "finch",
            tcolor: "green"
        }, {
            tag: "samples",
            authors: "chang",
            tcolor: "red"
        }, {
            tag: "nodes",
            authors: "thomas",
            tcolor: "yellow"
        }];

        //Shape of the outer ring (tags)
        var arcGroup = svgBody.append("g") //.data(tags)
            .attr("transform", "translate(500,500)");
        var arcShape = d3.svg.arc()
            .innerRadius(425)
            .outerRadius(575)
            .startAngle(0)
            .endAngle(2 * Math.PI);
        var pie = d3.layout.pie()
            .sort(null)
            .value(function(d) {
                return 2 * Math.PI / tags.length
            });
        var gA = arcGroup.selectAll(".arcstyle")
            .data(pie(tags))
            .enter().append("g")
            .attr("class", "arc");
        gA.append("path")
            .attr("d", arcShape)
            .style("fill", function(d) {
                return d.tcolor
            });
        gA.append("text")
            .attr("transform", function(d) {
                return "translate(" + arcShape.centroid(d) + ")"
            })
            .attr("dy", ".35em")
            .style('fill', 'white')
            .text(function(d) {
                return d.tag
            });
    </script>
</body>
</html>

这些问题：

您正在电弧发生器中设置起始角度和结束角度：

var arcShape = d3.svg.arc()
    .innerRadius(425)
    .outerRadius(575)
    .startAngle(0)
    .endAngle(2*Math.PI);

删除它：

var arcShape = d3.svg.arc()
    .innerRadius(425)
    .outerRadius(575);

要访问切片的数据，您必须使用 d.data ：

.style("fill", function(d) {
    return d.data.tcolor
});

value真的无关紧要，因为所有切片的长度都相同。您可以返回任何数字：
```
.value(function(d) {
    return 1
});
```

此外，对文本使用.style("text-anchor", "middle")。

以下是包含这些更改的代码：

var w = 500;
 var h = 500;
 var svgBody = d3.select("body").append("svg")
   .attr("width", w)
   .attr("height", h);
 //Doing the connection of tags to annulus
 var tags = [{
   tag: "translation",
   authors: "smith",
   tcolor: "blue"
 }, {
   tag: "code",
   authors: "finch",
   tcolor: "green"
 }, {
   tag: "samples",
   authors: "chang",
   tcolor: "red"
 }, {
   tag: "nodes",
   authors: "thomas",
   tcolor: "yellow"
 }];
 //Shape of the outer ring (tags)
 var arcGroup = svgBody.append("g") //.data(tags)
   .attr("transform", "translate(250,250)");
 var arcShape = d3.svg.arc()
   .innerRadius(200)
   .outerRadius(250);
 var pie = d3.layout.pie()
   .sort(null)
   .value(function(d) {
     return 1
   });
 var gA = arcGroup.selectAll(".arcstyle")
   .data(pie(tags))
   .enter().append("g")
   .attr("class", "arc");
 gA.append("path")
   .attr("d", arcShape)
   .style("fill", function(d) {
     return d.data.tcolor
   });
 gA.append("text")
   .attr("transform", function(d) {
     return "translate(" + arcShape.centroid(d) + ")"
   })
   .attr("dy", ".35em")
   .style("text-anchor", "middle")
   .style('fill', 'white')
   .text(function(d) {
     return d.data.tag
   });

<script src="https://d3js.org/d3.v3.min.js"></script>

相关内容

最新更新

热门标签：