Question

我正在制作一个饼图网络，我整个周末一直在努力为每个馅饼楔子设置一个图例或工具提示。这是我的工作Fiddle没有标签，我已粘贴下面的代码。如何从标签变量中输入组号或标签？

提前致谢!!

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

    <style>

        .node {
            stroke: #fff;
            stroke-width: 1.5px;
        }

        .link {
            stroke: #808080;
            stroke-opacity: .6;
        }

    </style>
</head>
<body>

<script type="text/javascript">
  graph = { "nodes":[{"proportions": [
{"group":1, "value": 25 },
{"group":2, "value": 0 },
{"group":3, "value": 0 },
{"group":4, "value": 0 }],"radius":25,"x":1000,"y":262.5},{"proportions": [
{"group":1, "value": 0 },
{"group":2, "value": 25 },
{"group":3, "value": 0 },
{"group":4, "value": 0 }],"radius":25,"x":191.3501125,"y":70.44565171875},{"proportions": [
{"group":1, "value": 0 },
{"group":2, "value": 0 },
{"group":3, "value": 25 },
{"group":4, "value": 0 }],"radius":25,"x":25,"y":30.9375},{"proportions": [
{"group":1, "value": 0 },
{"group":2, "value": 0 },
{"group":3, "value": 0 },
{"group":4, "value": 25 }],"radius":25,"x":833.572375,"y":222.9734390625}],"links": [{ "source":0, "target":1, "length":900, "width":9},
{ "source":0, "target":3, "length":900, "width":9},
{ "source":1, "target":2, "length":900, "width":9},
{ "source":2, "target":3, "length":900, "width":9}]
} 
var labels = ['mycave1','mycave2','mycave3','mycave4'];
var width = 4000,
    height = 1000,
radius = 25,
color = d3.scale.category10();

var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d.value; });

var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(0);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var force = d3.layout.force()
.charge(-120)
.linkDistance(4 * radius)
.size([width, height]);

force.nodes(graph.nodes)
.links(graph.links)
.start();

var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; })
.attr("class", "link");

var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"});

node.each(function(d){
    arc = arc.outerRadius(d.radius);

    d3.select(this)
    .selectAll("path")
        .data(function(d){ return pie(d.proportions); })
    .enter().append("svg:path")
        .attr("d", arc)
        .style("fill", function(d,i){ return color(d.data.group) });    
});




  </script>
  </body>
  </html>

Answer 1

对于工具提示，只需在每个路径上附加一个title元素。

.append("svg:title")
    .text(function(d) {return "Group "+d.data.group;});

这是一个小提琴：http://jsfiddle.net/ctsprjyq/18/

如果你想要相应的标签（第1组= mycave1，第2组= mycave2等），只需使用组值作为标签数组的索引。

.append("svg:title")
    .text(function(d) {return labels[d.data.group-1];});

带有图例或工具提示的饼图网络？

1 个答案: