Question

我试图找出d3旋转的默认锚点，而我打算围绕它的末端旋转一条线：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: A simple bar chart</title>
        <script type="text/javascript" src="../d3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

            //Width and height
            var w = 400;
            var h = 200;


            var dataset = [ 1,2,3,4];

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", 50)
               .attr("y", 50 )
               .attr("width", 100)
               .attr("height",1)
               .attr("transform", (d, i)=>" rotate("+10*i+")")
              ;



        </script>
    </body>
</html>

线条是彼此分开的空间。什么样的翻译也需要让他们在一端互相接触？以及d3默认使用的旋转中心是什么？

感谢。

如何围绕角落旋转对象

0 个答案: