D3,检索<g>元素的x位置并应用多个变换</g>

时间:2014-04-24 17:19:55

标签: svg d3.js transform

使用D3.js我想多次转换xgroup(例如,通过单击按钮a导致每次点击转换),从组的当前位置开始。问题是我无法检索组的x ,即使我找到它,也找不到任何内置函数可以让我更改组的x从当前的x开始。我错过了重要的事吗?很奇怪我无法将x元素添加到SVG“stage”中。

我的代码如下(为Lars编辑):我按照你昨天建议我的方式创建节点(克隆它们)。

var m=[5,10,15,20,25,30];

var count=0;

d3.select('svg').on("mouseup", function(d, i){

     count+=0.5;

     var n = d3.selectAll(".myGroup");

     n.each(function(d,i) {

        if(i!=0){
            // here I need to know the current x of the current n element but I 
            // can't get it
            // this causes error "Uncaught TypeError: undefined is not a function"
            // var currentx = d3.transform(this.attr("transform")).translate[0];

            this.setAttribute("transform", "translate("+((100/m[i])*count)+",10)");

        }

     });

});

1 个答案:

答案 0 :(得分:18)

获取和更改g元素的位置相对简单。例如:

var g = d3.select("#myG");

// get x position
var currentx = d3.transform(g.attr("transform")).translate[0];

// set x position
g.attr("transform", "translate(" + (currentx + 100) + ",0)");

编辑:

如果您有一个原始DOM元素,请先选择D3:

var currentx = d3.transform(d3.select(this).attr("transform")).translate[0];