Question

有没有办法在初始创建g元素后只选择第二个变换值并进行修改？

我想做类似的事情：

d3.select(".class")
    .attr("transform", 'translate(' + _ + ', ' + 0 + ')');

第一个参数（'_'）未被触及，只有第二个被修改为0.

创建g类后这可能吗？

由于

Answer 1

是的，你可以这样做，下面的代码显示了我在点击按钮时如何向g组添加翻译:(我为你添加了评论，以便更好地了解代码）

    //making a g group with in the circle
    var myG = d3.select("body").append("svg").attr("width", 500).attr("height", 500).append("g");
    //appending a circle to the g group.
    myG.append("circle").attr("cy", 60).attr("cx", 60).attr("r",10);

    var xTrans = 0;
    d3.select("#click").on("click", function() {
        xTrans+=20;
        //applying transform to g.
    	myG.attr("transform", "translate("+xTrans+",0)")
    });

circle{
   fill:steelblue;
}

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

d3 transform仅转换第二个参数

1 个答案: