D3中的链接变换

Question

我目前在D3折线图中链接旋转变换时遇到麻烦。原点的参数会动态更新，因此我不确定我需要做什么，以便每次对这批代码的调用都会使行进一步旋转15度。我尝试根据我看到的另一个答案在旋转字符串前面添加一个加号，但会引发错误。理想情况下，我希望每次从更新后的旋转位置开始制作动画（例如钟针转动）。

//select the path I want to transform this works for a single time

d3.select(".demandPath1")
.transition()
.duration(2000)
.attr("transform",`rotate(-15,${xScale([demandX[5])},{yScale(demandY[5])})`)

按下此按钮将调用此代码，该按钮应每次从新位置开始以15度为增量连续旋转线条。

Answer 1

1. 创建一个变量来存储字符串：

   var existingTransformString =“”;

2. 使用字符串concat方法将新字符串追加到现有字符串中，该字符串具有正确存储的转换，即已应用于现有路径元素的转换：

功能rotate（方向）{     if（direction ===“ increase”）{          let string = rotate(15,${xScale(demandX[5])},${yScale(demandY[5])});          existingTransformString = existingTransformString.concat（string）;           d3.select（“。demandPath1”）。attr（“ transform”，existingTransformString）;      }其他{        let string = rotate(-15, ${xScale(demandX[5])},${yScale(demandY[5])});        existingTransformString = existingTransformString.concat（string）;       d3.select（“。demandPath1”）。attr（“ transform”，existingTransformString）;    }   }