javascript - d3 旋转轮带固定夹

Question

我正在尝试“剪辑”这个纺车:https://bl.ocks.org/mpmckenna8/7f1f0adbf7d9ed7520b3950103e8094c

我只想让轮子的上半部分可见。当我尝试使用“剪辑路径”执行此操作时，我最终得到了一个半轮旋转。 (参见:https://codepen.io/icklerly/pen/JMBdGX)

svg.append("clipPath")       // define a clip path
.attr("id", "ellipse-clip") // give the clipPath an ID
.append("rect")
.attr("x", -100)         
.attr("y", 0)         
.attr("width",  200)         
.attr("height", 200);

但我希望轮子旋转并且剪辑窗口始终位于顶部的相同位置。

有什么建议吗？

Answer 1

问题是您在应用剪辑路径的位置旋转了 g 元素。相反，您可以在应用剪辑路径的位置添加另一个 g 并在内部的另一个 g 上保持旋转。

所以 intead 这个:

var hub = svg.append('g')
  .attr('transform', function(){
    return "translate(" + width/2  + "," + height/2 + ")"
  })
.attr('class', 'hub')
.attr("clip-path", "url(#rect-clip)")

这样做:

var hub = svg.append('g').attr("clip-path", "url(#rect-clip)") /* append first g with  clip-path */
  .append('g') /* then create the inside g with the remaining properties*/
  .attr('transform', function(){
    return "translate(" + width/2  + "," + height/2 + ")"
  })
.attr('class', 'hub')

您还可以调整剪辑路径，只需将其大小设为轮子的一半，以避免使用 x/y 的负值。

完整代码:

var svg = d3.select('svg')

var margin = 20;
var width = 200, // margin,
  height = 200 // margin;

svg.append("clipPath") // define a clip path
  .attr("id", "rect-clip") // give the clipPath an ID
  .append("rect")
  .attr("x", 0) // position the x-centre
  .attr("y", 0) // position the y-centre
  .attr("width", 200) // set the x radius
  .attr("height", 100);


var hub = svg.append('g').attr("clip-path", "url(#rect-clip)").append('g')
  .attr('transform', function() {
    return "translate(" + width / 2 + "," + height / 2 + ")"
  })
  .attr('class', 'hub')

hub.append('circle')

  .attr('cx', 0)
  .attr('cy', 0)
  .attr('r', 10)
  .attr('fill', 'pink')

hub.append('circle')
  .attr('cx', 0)
  .attr('cy', 0)
  .attr('r', 90)
  .attr('stroke', 'red')
  .attr('stroke-width', 5)
  .attr('fill', 'none')

var linelen = [0, 90];

var line = d3.line().x(function(d) {
    return (0)
  })
  .y(function(d) {
    return (d)
  })
const numberSpokes = 10;

for (let i = 0; i < numberSpokes; i++) {
  var rotation = (360 / numberSpokes) * i;

  var spoke = hub
    .append('path')
    .datum(linelen)
    .attr('d', line)
    .attr('stroke', 'blue')
    .attr('transform', 'rotate(' + rotation + ')')
    .attr('class', 'spoke')
}

const alreadyTransformed = hub.attr('transform')

rotateIt(false)

function rotateIt(much) {

  //console.log(alreadyTransformed)
  hub.transition().duration(4000)
    .attr('transform', alreadyTransformed + ' rotate(' + (much ? 0 : 180) + ')')
    .on('end', function() {
      rotateIt(!much)
    })

}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="svger" width="200px" height="200px"></svg>