Question

在d3图表中，让我们说饼图。是否可以为每个饼段编写函数？

示例：如果我有一个饼图，并且两个饼段是“高”和“低”。我可以编写一个函数，用于当用户点击特定事件应该发生的“高”段或应该导航到的特定页面时吗？

Answer 1

（这是＃34;过于宽泛＆＃34;对于SO。仍然，这是一个答案）

当您单击path元素时，您可以使用第一个参数检索绑定数据（如单击任何包含数据的元素时）：

path.on("click", function(d){
    //code based on d, such as:
    //if(d.foo == bar){ do something }
}

根据数据，您可以设置所需的功能。例如，在这个演示中，两个切片有一个名称，＆＃34;高＆＃34;和＆＃34;低＆＃34;。点击其中任何一个都会提醒其各自的名称：

＆＃13;

var width = 300,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6"]);
		
var data = [{slice: "high", value: 40},
{slice: "low", value: 5},]

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var labelArc = d3.svg.arc()
    .outerRadius(radius - 80)
    .innerRadius(radius - 80);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.value; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var g = svg.selectAll(".arc")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");

  var slice = g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.slice); });
			
			var texts = g.append("text")
      .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .text(function(d) { return d.data.slice; });
			
			slice.on("click", function(d){
			alert("This is the " + d.data.slice + " slice");
			})

＆＃13;

.arc text {
  font: 14px sans-serif;
  text-anchor: middle;
  pointer-events: none;
}

.arc path {
  stroke: #fff;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

我可以在d3饼图的每个段上调用函数吗？

1 个答案: