将D3路径转换为点而不理解输出

时间:2014-04-18 17:08:03

标签: svg d3.js

我试图将路径(由D3生成)转换为点。我使用getTotalLength()和getPointAtLength(),但我回来的值真的很奇怪。 getTotalLength()返回一个巨大的值 - 14594.1923828125。此外,如果我查看单个值,我得到的东西似乎不在坐标空间中。例如,getPointAtLength(10000)返回负值。

我做错了什么,或者我对退回的值不了解?

Here is my code
//The data for our line
var lineData = [ { "x": 1,   "y": 30},  { "x": 20,  "y": 50},
                 { "x": 70,  "y": 5},  { "x": 100, "y": 60}];

//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("basis");

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

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                        .attr("d", lineFunction(lineData))
                        .attr("stroke", "blue")
                        .attr("stroke-width", 2)
                        .attr("fill", "none");

mySVG = d3.select("svg")
myPath = mySVG.select("path").node()
console.log(myPath)
console.log(myPath.getTotalLength())
console.log(myPath.getPointAtLength(10000))

这是jsfiddle - http://jsfiddle.net/atTxL/1/

由于

0 个答案:

没有答案