Javascript D3路径：仅转换线的一端

原始代码可在“”中找到。

我能够使用D3路径生成成功地绘制线性线。现在我想取其中一条线，特别是通过增加x值来转换仅它的原点

在HTML视图中，问题表现在标题为“”的HTML div中，转换HTML div中路径的起始端（或顶部），其中呈现绿线/路径

用于渲染线的原始数据为：

  var lineSet1 = [
    { "x": 0,   "y": 0},
    { "x": 50,  "y": 50}];

我用来绘制和转换路径的函数是：

  // This function is meant to transition only the origin point of a line.
  function drawTransitioningOriginPath( dataSet, selectString, color, fill, strokeWidth, svgWidth, svgHeight, interpolationType ) {

    //This is the accessor function we talked about above
    var lineFunction = d3.svg.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .interpolate(interpolationType);

    //The SVG Container
    var svgContainer = d3.select(selectString).append("svg")
        .attr("width", svgWidth)
        .attr("height", svgHeight);

    //The line Path we draw
    var lineGraph = svgContainer.append("path")
        .attr("d", lineFunction(dataSet))
        .attr("stroke", color)
        .attr("stroke-width", strokeWidth*2)
        .attr("fill", fill);

     lineGraph.select("path").transition() //<=== TRYING TO TRANSITION THE ORIGIN HERE
         .duration(500)
         .ease("linear")
         .attr("d", lineFunction(function(d, i){
           if(i == 0){
             newX = d.x + 1;
             return d.x = d.newX;
           }
         }));

   }

//此函数仅用于转换直线的原点。
函数drawTransitioningOriginPath（数据集、selectString、颜色、填充、strokeWidth、svgWidth、svgHeight、插值类型）{
//这就是我们上面讨论的访问器函数
var lineFunction=d3.svg.line（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.插值（插值类型）；
//SVG容器
var svgContainer=d3.select（selectString）.append（“svg”）
.attr（“宽度”，svgWidth）
.attr（“高度”，svgHeight）；
//我们画的路线
var lineGraph=svgContainer.append（“路径”）
.attr（“d”，lineFunction（数据集））
.attr（“笔划”，颜色）
.attr（“笔划宽度”，笔划宽度*2）
.attr（“填充”，填充）；
lineGraph.select（“path”）.transition（）//在每次迭代中，您只需要将绑定数据的一个子集传递给
lineFunction
。也就是说，您需要执行line
.attr（“d”，函数（d）{返回lineFunction（d.slice（start））；}）
其中
start
开头是0，结尾是
d.length
。我会使用自定义属性tween来计算每个时间步的正确长度，使用介于0和
d.length
之间的插值器。很抱歉，Lars。我感谢您的帮助，但我对D3的了解还不够深入，无法理解您所说的内容建议。我一直在试图剖析你的建议（通过测试），但我没有取得任何进展。因此，澄清一下，你所寻找的是一个“反面”画出一条路径，开始时为完整路径，然后起点向终点移动，直到直线消失，对吗？不。我想将起点向右移动，坐标中只有“x”增加。这将导致直线顶部向右移动，而直线底部保持不变（就像汽车的雨刮片）。谢谢。啊，好的。你可以使用不同的数据