Question

我正在努力学习d3。

我希望能得到一些如何“爆炸”的指导。在d3（悬停）中带有鼠标悬停事件的pieSegment。我一直试图弄清楚如何在d3中使用.on（）方法爆炸一段，但我没有运气。

编辑：为了澄清，我试图将pieSegment远离馅饼的中心移动，同时让其余部分静止不动。

的index.html

<!DOCTYPE html>
<html>
<head>
  <link href="style.css" rel="stylesheet">
  <script src="http://d3js.org/d3.v3.min.js"></script>
</head>

<body>
<script>
    var data = [21, 32, 35, 64, 83];
    var pieSegments = d3.layout.pie()(data);

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

    var generator = d3.svg.arc()
    .innerRadius(70)
    .outerRadius(100)
    .startAngle(function(d){return d.startAngle;})
    .endAngle(function(d){return d.endAngle});

    var colors = d3.scale.category10();

    canvas.selectAll('path').data(pieSegments).enter().append('path')
        .attr("d", generator)
        .attr("fill", function(d,i){return colors(i);})
        .attr("stroke", "white")
        .attr("stroke-width", 6)
        .attr("transform", "translate(100,100)");
</script>
</body>
</html>

Answer 1

一个简单的解决方案是创建另一个电弧发生器......

document.querySelector(".results").innerHTML = '<a class="linksa" href=' + testCheck[key].fullurl +'> <div class="entryOne"><h1>'+ testCheck[key].title + '</h1>'+testCheck[key].extract+'</p></div></a>';

...并在var generator2 = d3.svg.arc() .innerRadius(80) .outerRadius(110);：

上使用它

mouseover

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

＆＃13;

.on("mouseover", function(){
    d3.select(this).attr("d", generator2)
})

＆＃13;

var data = [21, 32, 35, 64, 83];
var pieSegments = d3.layout.pie()(data);

var canvas = d3.select("body")
  .append('svg')
  .attr("height", 300)
  .attr("width", 300);

var generator = d3.svg.arc()
  .innerRadius(70)
  .outerRadius(100)
  .startAngle(function(d) {
    return d.startAngle;
  })
  .endAngle(function(d) {
    return d.endAngle
  });

var generator2 = d3.svg.arc()
  .innerRadius(80)
  .outerRadius(110);

var colors = d3.scale.category10();

canvas.selectAll('path').data(pieSegments).enter().append('path')
  .attr("d", generator)
  .attr("fill", function(d, i) {
    return colors(i);
  })
  .attr("stroke", "white")
  .attr("stroke-width", 6)
  .attr("transform", "translate(150,150)")
  .on("mouseover", function() {
    d3.select(this).attr("d", generator2)
  })
  .on("mouseout", function() {
    d3.select(this).attr("d", generator)
  })

＆＃13;

PS：不要将SVG选择称为<script src="https://d3js.org/d3.v3.min.js"></script> ......这令人困惑。当我们看到canvas时，我们将其与HTML5画布相关联。请改用var canvas。

爆炸甜甜圈/饼图细分市场

1 个答案: