d3.js 用于访问svg转换的x/y值的Javascript

jpfvwuh4  于 2022-11-12  发布在  Java
关注(0)|答案(1)|浏览(120)

当前是否存在任何内置的javascript方法,可以直接访问svgtransform =translate(x,y)xy
例如,下面的最小样本,我正在处理svg元素
第一个
并且该元素包含很少的现有圆。x1c 0d1x
我想获取每个圆的transform=translate(x,y)x值,并使用自定义函数更改它。
我目前的做法如下,如果有一个内置的(vanilla和/d3)方法可以直接访问xtransform=translatey,我希望避免编写regex

document.querySelectorAll('circle').forEach(
    (a,i)=>{
       const transformString=  a.getAttribute('transform');
       //grab the X value with regex and change as desired
       const valX = parseFloat(transformString.match(/(\d+\.\d+)(?=\,)|(\d+)(?=\,)/gm))+10;
       //replace existing X with new X
       a.setAttribute('transform',`${transformString.replace(/(\d+\.\d+)(?=\,)|(\d+)(?=\,)/gm,valX)}`)});

d3等效值

d3.selectAll('circle')
    .attr('transform', function (d,i) {
        const transformString= this.getAttribute('transform');
        const valX = parseFloat(transformString.match(/(\d+\.\d+)(?=\,)|(\d+)(?=\,)/gm))+10;
        return `${transformString.replace(/(\d+\.\d+)(?=\,)|(\d+)(?=\,)/gm,valX)}`  
    });
o75abkj4

o75abkj41#

document.querySelectorAll('circle').forEach(
    circle => {
       const additionalTransform = circle.ownerSVGElement.createSVGTransform();
       additionalTransform.setTranslate(10, 0);
       circle.transform.baseVal.appendItem(additionalTransform);
       // When doing this multiple times, `translate()`s might be piling up,
       // like transform="translate(10, 0) translate(10, 0) translate(10, 0)".
       // Consolidate them into a single matrix transformation.
       circle.transform.baseVal.consolidate();
    }
);

相关问题