创建带点的 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));