用点创建D3折线图

Question

I am trying to create a line graph with points using D3. My data exists in an XML file that I am referencing. Currently, I am able to display the graph with points, but I would like to add lines between them. Here is a picture of my current graph.

I have tried using the following code to create the lines, but I have not been able to display any lines on the graph.

.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);

I am using these lines of code to pass in my data, which has worked with the way I have created the circles.

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

I am looking for a solution that will work with the way I am accessing my data. I would appreciate any suggestions. Thanks!

Answer 1

you are almost there to be honest! You just missed out your lineFunction. Here is an example on jsfiddle for you: 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));