Question

我构建了一个拖动事件，我想只在坐标是10的倍数时才拖动元素：

    const x = d3.event.x
    const y = d3.event.y

    if (x % 10 === 0) {
      d3.select(this)
        .attr('transform', 'translateX(' + x + ')')
    }

    if (y % 10 === 0) {
      d3.select(this)
        .attr('transform', 'translateY(' + y + ')')
    }

但是，当我拖动时，我会收到这样的错误：

Error: Invalid value for <rect> attribute transform="translateX(180)"

也许我以错误的方式使用translate属性？这样做的正确方法是什么？

Answer 1

没有属性为translateX / translateY

你可以这样做。

    const x = d3.event.x
        const y = d3.event.y
   //old translate
    var translate = d3.transform(d3.select(this).attr("transform")).translate;
        if (x % 10 === 0) {
          //maintain the y translate to old
          d3.select(this)
            .attr('transform', 'translate(' + x +','+ translate[1]+')')
        }

        if (y % 10 === 0) {
          d3.select(this)
          //maintain the x translate to old
            .attr('transform', 'translate(' + translate[0] +','+ y+')')
        }

希望这有帮助！

Answer 2

您获得的错误是因为＆＃34; translateX＆＃34;不是SVG元素的有效转换（看起来您正在使用d3.js在DOM中生成SVG元素）。

可以在MDN here上找到有效的转换值。

根据您对问题的描述，我不确定transform是否真的是您想要的，但无论如何只需删除＆＃34; X＆＃34;应该这样做。例如：

if (x % 10 === 0) {
    d3.select(this)
        .attr('transform', 'translate('+x+')');
}

请注意translate()接受参数x和y。如果只提供一个参数，则假定为x，y将设置为0.

再次注意，虽然d3正在帮助您选择元素，但这里真正发生的一切是您在svg transform元素上设置rect属性。< / p>

如何在D3.js中使用translateX和translateY？

2 个答案: