Question

转到下面

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

我很难理解两件事

为什么{3.}}在d3.mouse（this）svg？我以为我理解this但在这里我无法理解如何根据this的定义推导出来。

另外，在重绘时，这里有什么？将观察者放在this上并不起作用。

我认为这是目前的观点，但我此时并不理解// Redraw the path: path .attr("d", function(d) { return line(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();
  }
}

Answer 1

可以使用两种方法创建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

过去的例子，d3.js

1 个答案: