使用点创建D3折线图

Question

我正在尝试使用D3创建带点的折线图。我的数据存在于我引用的XML文件中。目前，我能够显示带有点的图形，但我想在它们之间添加线条。这是我当前图表的图片。

我尝试使用以下代码创建行，但我无法在图表上显示任何行。

.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

//Define line
var line = d3.svg.line()
    .x(function(d) { return d[0]; })
    .y(function(d) { return d[1]; });

//Draw line
svg.append("path")
    .datum(dataset)
    .attr("class", "line")
    .attr("d", line);

我正在使用这些代码行传递我的数据，这与我创建圈子的方式一致。

//Create dataset
for(var i=0;i<record.length;i++)
{
    x = record[i].getElementsByTagName("date")[0].childNodes[0].nodeValue;
    y = y + 1;
    var newArray = [x, y];
    dataset.push(newArray);
}

我正在寻找一种能够与我访问数据的方式一起使用的解决方案。我将不胜感激任何建议。谢谢！

Answer 1

你几乎要诚实！你错过了你的lineFunction。以下是jsfiddle的示例： http://jsfiddle.net/wd6r5/

//Create dataset
var dataset = [];
for(var i = 0; i < 7; i++) {
    x = 50 * i; // record[i].getElementsByTagName("date")[0].childNodes[0].nodeValue;
    y = 50 * i + 10; //y + 1;
    var newArray = [x, y];
    dataset.push(newArray);
}

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

d3.select("svg")
.append("path")
.attr("stroke", "#333")
.attr("stroke-width", 1.2)
.attr("d", lineFunction(dataset));