Question

我想在打开后在其轴上旋转d3包图。我在rotate(45 100 100)对象上使用了转换<g>。我相信我已经正确设置了旋转的中心（圆圈开始和结束在同一个地方）。

问题：我的圈子在旋转时弹出不对齐。

CodePen ：https://codepen.io/denjn5/pen/wqgjMr

<style>
    circle {
        stroke: white;
        fill: #05668D;
        opacity: 0.3;
        stroke-width: 2px;
    }
</style>
<svg>
    <g></g>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    var vWidth = 200;
    var vHeight = 200;
    var vData = {
        'id': 'TOPICS', 'children': [{
            'id': 'Topic A',
            'children': [{'id': 'Sub A1', 'size': 4}, {'id': 'Sub A2', 'size': 4}]
        }, {
            'id': 'Topic C',
            'children': [{'id': 'Sub C1', 'size': 4}, {'id': 'Sub C2', 'size': 4}]
        }]};

    // Prepare our physical space
    var g = d3.select('svg').attr('width', vWidth).attr('height', vHeight).select('g');

    // Declare d3 layout
    var vLayout = d3.pack().size([vWidth, vHeight]);

    // Layout + Data
    var vRoot = d3.hierarchy(vData).sum(function (d) { return d.size; });
    var vNodes = vRoot.descendants();
    vLayout(vRoot);
    var vSlices = g.selectAll('circle').data(vNodes).enter().append('circle')
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .attr('r', function (d) { return d.r; });

    g.transition().duration(1000)
        .attr('transform', 'rotate(45 100 100)');
</script>

我看到有关此主题的其他一些帖子。但他们使用非SVG标签来解决或引用浏览器错误（无论好坏，我的代码在Chrome，Safari和Firefox中的行为相同）。感谢您的帮助。

让SVG变换在中心旋转

0 个答案: