Question

原始代码位于“HERE”

我能够使用D3 Path生成成功绘制线性线。我现在想采用其中一条线，特别是通过增加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;
           }
         }));

   }

在这个例子中，我试图从左到右摆动原点，即线的顶部，一次一个增量（即“+1”）。

我的逻辑是，当我尝试调用转换时，我应该首先隔离索引“i”等于0的数据集，这样我就可以隔离表示原点的路径的末尾然后递增“x”坐标为1，以便开始转换它。我想增加一（1）的原因是（稍后）我将能够反转增量，因为x变得等于SVG画布的宽度，就像汽车的雨刮器一样，前后来回

当我执行代码时，我在浏览器中收到以下错误： TypeError：'undefined'不是对象（评估'd.x'）

D3路径：仅转换一行的一端

0 个答案: