Question

我一直试图理解为什么一个特定的可视化没有按照我想要的方式出现。我见过的示例，如this一个和this一个，都使用其他文件（无论是json，csv还是tsv）。可以在没有的情况下制作甜甜圈，只需按照我在＆＃34;标签中所做的那样放置数据即可。变量？没有太多数据可供使用，而且csv / tsv文件确实没有地方可以存储。

我的代码如下。理想情况下，它应该只是一个甜甜圈，标签名称附加到每个扇区，例如一个蓝色的部门，说＆＃34;翻译＆＃34;在上面。提前谢谢！

<!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>

Answer 1

这些是问题：

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

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")作为文本。

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

＆＃13;

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

＆＃13;

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

＆＃13;

我可以制作没有外部文件的圆环图吗？

1 个答案: