Question

var g = d3.select("#originalRectElement");
d3.select('#newElem').append('path').attr('transform', g.attr('transform'));

这里我正在创建一个新的“路径”并从#originalRectElement设置转换值。

我想在变换值的x轴上添加10px（例如translate（100,100））。如何使用d3.js设置它？

我希望输出为translate（110,100）。如何使用d3.js设置它？

Answer 1

使用d3.transform method。

var trans = d3.transform(g.attr('transform')).translate;
whatEver.attr('transform', 'translate(' + (trans[0] + 10) + ',' + trans[1] + ')');

Answer 2

您可以这样继续：

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

d3.select('#newElem').append('path').attr('transform', function() {
    var transform = g.attr('transform');
    var offsets = transform .match(/(\d+)/g); // We grab only the digits    

    return 'translate(' + (offsets[0] + 10) + ',' + offsets[1] + ')'; // Here we add 10 to the x offset
});

这个想法很简单：使用regex抓取x属性中的y，transform值，然后返回新的偏移量。

d3如何操纵svg翻译值

2 个答案: