Question

我正在尝试在D3.js中绘制一个高山滑雪赛车手。为此，我需要将某些元素旋转一个角度。例如，要绘制腿部，应先绘制一个椭圆，然后将其旋转一定角度。但是，我对该库中所有可用的旋转方法感到困惑。如果要创建椭圆或其他元素，如何在不更改cx或cy位置的情况下旋转它？

这是我的代码。我尚未开始绘制滑雪者，因为我正在努力进行适当的旋转。我希望任何人都可以引导我或指导我找到有关此主题的一些好帖子。谢谢

    let width = 960,
    height = 500;

let middleWidth = width / 2,
    middleHeight = height / 2


const svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

let group = svg.append('g')

let skier = group
    .append("rect")
    .attr("x", middleWidth)
    .attr("y", middleHeight)
    .attr("width", 50)
    .attr("height", 50)
    .attr("fill", "green");

let skis = group
    .append("rect")
    .attr("x", middleWidth * 0.3)
    .attr("y", middleHeight * 0.3)
    .attr("width", 50)
    .attr("height", 50)
    .attr("fill", "green")
    .attr("transform", "rotate(-59, 50, 50)");

Answer 1

d3.js使用DOM和SVG转换执行旋转。这里有一些很好的参考资料，以了解其工作原理

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations

在您的示例中，您将旋转应用于最后一个rect元素。也许您想要做的就是将其应用于团队？ d3.js使用链接功能并按一定顺序应用。

let group = svg.append('g')
    .attr("transform", "rotate(-59, 50, 50)")

let skier = group
    .append("rect")
    .attr("x", middleWidth)
    .attr("y", middleHeight)
    .attr("width", 50)
    .attr("height", 50)
    .attr("fill", "green");

let skis = group
    .append("rect")
    .attr("x", middleWidth * 0.3)
    .attr("y", middleHeight * 0.3)
    .attr("width", 50)
    .attr("height", 50)
    .attr("fill", "green");

在d3.js中旋转矩形的不同方法

1 个答案: