元素并应用多重变换

元素并应用多重变换

本文介绍了D3,检索< g>的x位置。元素并应用多重变换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

对于D3.js,我想多次转换 x 按钮a导致每次点击的变换),从组的当前位置开始。问题是我无法检索组的x,即使我找到它,我找不到任何内置函数,让我更改 x 从当前 x 开始。我缺少一些重要的东西吗?很奇怪,我不能得到添加到SVG舞台的元素的 x

With D3.js I want to transform the x of a group many times (eg. by clicking a button a causing a transform for every click), starting from the current position of the group. Problem is I can't retrieve the x of the group and, even if I find it, I can't find any built-in function that lets me change the x of a group starting from its current x. Am I missing something important? It's very strange I can't get the x of an element added to an SVG "stage".

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

My code is the following (edited for Lars): I created the nodes the way you suggested me yesterday (cloning them).

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)");

        }

     });

});


推荐答案

获取和更改 g 元素是相对直接的。例如像这样:

Getting and changing the position of a g element is relatively straightforward. For example like this:

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选择它:

If you have a raw DOM element, select it with D3 first:

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

这篇关于D3,检索< g>的x位置。元素并应用多重变换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-01 11:31