d3.js在仔細例如

-3

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(); 
    } 
}

回答我的問題閱讀基礎上的建議文件後低於

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.

來源

2016-09-22 user3502374

使用d屬性創建的svg路徑。 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path –

好的，但函數tick如何在這裏獲得'd'的定義？ – user3502374

您是否知道可用於D3的豐富文檔？關於['selection.on（）']（https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#on）一節中的一句話回答了你的問題：*「指定的偵聽器以與其他運算符函數相同的方式調用，傳遞當前數據d和索引i，並將此上下文作爲當前DOM元素。」* – altocumulus

-2

SVG線可以通過使用兩個方法來創建。

- 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>

創建 - SVG路徑： - 路徑使用d創建元件。通過使用D3它很容易

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

這關鍵字用來指代當前元素。 Line chart

來源

2016-09-22 05:50:14

d3.js在仔細例如

回答

相關問題