Question

我正在研究D3中的一个项目 - 目前当用户将鼠标悬停在一个圆圈上时，我想将一个圆圈变成一个矩形，但我不知道我该如何开始。

我的起点是圆圈（ - ＆gt;过渡到矩形）。

svg.selectAll(".circle")
  .on('mouseover', function(d){
  d3.selectAll(".circle")
  .transition()
  .attr (...)
})

这是正确的做法吗？我知道有一个类似的问题（How to change a circle into a square with d3.js），但我认为这不是我的目的的正确方法。但是真的 - 我不确定^^

Answer 1

简单的答案是遵循提到的另一个问题https://stackoverflow.com/a/17439344/21061中的答案，但是还有另一种方法可以做到这一点。

棘手的部分是，SVG无法将svg:circle设为svg:square。但是，它可以将任何svg:path动画为任何其他svg:path，您可以利用它来实际生成圆形和方形之间的良好过渡。我已将http://bl.ocks.org/mbostock/1020902的示例简化为演示：

＆＃13;

(function(){function n(n,a,r){for(var e,s,o,m=-1,u=2*Math.PI/a,b=0,h=[];++m<a;)e=n.m*(m*u-Math.PI)/4,e=Math.pow(Math.abs(Math.pow(Math.abs(Math.cos(e)/n.a),n.n2)+Math.pow(Math.abs(Math.sin(e)/n.b),n.n3)),-1/n.n1),e>b&&(b=e),h.push(e);for(b=r*Math.SQRT1_2/b,m=-1;++m<a;)s=(e=h[m]*b)*Math.cos(m*u),o=e*Math.sin(m*u),h[m]=[Math.abs(s)<1e-6?0:s,Math.abs(o)<1e-6?0:o];return t(h)+"Z"}var a=d3.svg.symbol(),t=d3.svg.line();d3.superformula=function(){function t(a,t){var u,b=r[e.call(this,a,t)];for(u in m)b[u]=m[u].call(this,a,t);return n(b,o.call(this,a,t),Math.sqrt(s.call(this,a,t)))}var e=a.type(),s=a.size(),o=s,m={};return t.type=function(n){return arguments.length?(e=d3.functor(n),t):e},t.param=function(n,a){return arguments.length<2?m[n]:(m[n]=d3.functor(a),t)},t.size=function(n){return arguments.length?(s=d3.functor(n),t):s},t.segments=function(n){return arguments.length?(o=d3.functor(n),t):o},t};var r={asterisk:{m:12,n1:.3,n2:0,n3:10,a:1,b:1},bean:{m:2,n1:1,n2:4,n3:8,a:1,b:1},butterfly:{m:3,n1:1,n2:6,n3:2,a:.6,b:1},circle:{m:4,n1:2,n2:2,n3:2,a:1,b:1},clover:{m:6,n1:.3,n2:0,n3:10,a:1,b:1},cloverFour:{m:8,n1:10,n2:-1,n3:-8,a:1,b:1},cross:{m:8,n1:1.3,n2:.01,n3:8,a:1,b:1},diamond:{m:4,n1:1,n2:1,n3:1,a:1,b:1},drop:{m:1,n1:.5,n2:.5,n3:.5,a:1,b:1},ellipse:{m:4,n1:2,n2:2,n3:2,a:9,b:6},gear:{m:19,n1:100,n2:50,n3:50,a:1,b:1},heart:{m:1,n1:.8,n2:1,n3:-8,a:1,b:.18},heptagon:{m:7,n1:1e3,n2:400,n3:400,a:1,b:1},hexagon:{m:6,n1:1e3,n2:400,n3:400,a:1,b:1},malteseCross:{m:8,n1:.9,n2:.1,n3:100,a:1,b:1},pentagon:{m:5,n1:1e3,n2:600,n3:600,a:1,b:1},rectangle:{m:4,n1:100,n2:100,n3:100,a:2,b:1},roundedStar:{m:5,n1:2,n2:7,n3:7,a:1,b:1},square:{m:4,n1:100,n2:100,n3:100,a:1,b:1},star:{m:5,n1:30,n2:100,n3:100,a:1,b:1},triangle:{m:3,n1:100,n2:200,n3:200,a:1,b:1}};d3.superformulaTypes=d3.keys(r)})();

var size = 1000;

var x = d3.scale.ordinal()
    .domain(d3.superformulaTypes)
    .rangePoints([0, 960], 1);

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);

var big = d3.superformula()
    .type("square")
    .size(size * 50)
    .segments(360);

svg.append("path")
    .attr("class", "big")
    .attr("transform", "translate(450,250)")
    .attr("d", big);

var circle = false;
setInterval(function() {
  circle = !circle;
  if(circle) {
     d3.select(".big").transition().duration(500).attr("d", big.type("circle"));
  } else {
     d3.select(".big").transition().duration(500).attr("d", big.type("square"));  
  }
}, 3000);

＆＃13;

path {
  stroke-width: 1.5px;
}

.small {
  fill: steelblue;
}

.big {
  stroke: #666;
  fill: #ddd;
}

.small:hover {
  stroke: steelblue;
  fill: lightsteelblue;
}

＆＃13;

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

＆＃13;

D3如何在鼠标悬停时将圆圈更改为矩形

1 个答案: