d3.js例乗り越えながら

Question

は

http://bl.ocks.org/cloudshapes/5661984

の下にオーバー行くと、私は大変な時間二つ

なぜthisはd3.mouseで（この）SVGでの理解を持っています？私はthisを理解していると思っていましたが、ここではthisの定義でどのように派生するのか理解できません。

また、再描画中に、ここには何がありますか？ウォッチャーをdに置くことができません。

// Redraw the path: 
    path 
     .attr("d", function(d) { return line(d);}) 

私はそれが現在のポイントであると仮定し、私は助けてください、この時点

でこのdを理解していません。どうもありがとうございます。

var margin = {top: 10, right: 10, bottom: 20, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 


var npoints = 100; 
var ptdata = []; 


var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d, i) { return d[0]; }) 
    .y(function(d, i) { return d[1]; }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var svgagain = d3.select("body").select("svg") 
    .on("mousemove", function() { var pt = d3.mouse(this); tick(pt); }); 



var path = svg.append("g") 
    .append("path") 
    .data([ptdata]) 
    .attr("class", "line") 
    .attr("d", line); 

function tick(pt) { 

    // push a new data point onto the back 
    ptdata.push(pt); 

    // Redraw the path: 
    path 
     .attr("d", function(d) { return line(d);}) 


    // If more than 100 points, drop the old data pt off the front 
    if (ptdata.length > npoints) { 
     ptdata.shift(); 
    } 
} 

の提案に基づいてドキュメントを読んだ後、私の質問への回答は、SVGラインが2つのアプローチを使用して作成することができ

The specified listener is invoked in the same manner as other operator functions, being passed the current datum d and index i, with the this context as the current DOM element. 

Answer 1

下回っていました。

- SVGライン： - ： - Dを使用して作成さ パスSVGパス - ここ線が座標（X1、Y1）、（X2、Y2）

<svg height="210" width="500"> 
    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
</svg> 

2を使用して作成することができます素子。 D3を使用することにより、このキーワードは、現在の要素を参照するために使用する

<svg height="210" width="400"> 
    <path d="M150 0 L75 200 L225 200 Z" /> 
</svg> 

は非常に簡単です。 Line chart