動態生成 - 多線圖

Question

我使用下面的代碼來生成多線圖。我得到了結果。但圖的樣子：

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 1025 - margin.left - margin.right, 
    height = 339 - margin.top - margin.bottom; 

    var x = d3.scale.linear() 
.range([0, width]); 

    var y = d3.scale.linear() 
.range([height, 0]); 

var color = d3.scale.category10(); 

var xAxis = d3.svg.axis() 
.scale(x) 
.orient("bottom"); 

    var yAxis = d3.svg.axis() 
.scale(y) 
.orient("left"); 

    var line = d3.svg.line() 
.interpolate("basis") 
    .x(function(d) { return x(d.days); }) 
    .y(function(d) { return y(d.testRuns); }); 

    var svg = d3.select("#application_status_graph").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 + ")"); 

    d3.json("js/lineChartData.json", function(error, data) { 
color.domain(d3.keys(data[0]).filter(function(key) {return key !== "days"; })); 
     data.forEach(function(d) { 
    d.days = parseInt(d.days); 
    }); 

    var status = color.domain().map(function(name){ 
return{ 
    name: name, 
    values: data.map(function(d){ 
     return {days: d.days, testRuns: +d[name]}; 
    }) 
} 
    }); 
     x.domain(d3.extent(data, function(d) { return d.days; })); 

    y.domain([ 
     d3.min(status, function(c) { return d3.min(c.values, function(v) { return v.testRuns; }); }), 
     d3.max(status, function(c) { return d3.max(c.values, function(v) { return v.testRuns; }); }) 
     ]); 
     svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Number of Test Runs"); 

    var city = svg.selectAll(".city") 
    .data(status) 
    .enter().append("g") 
    .attr("class", "city"); 

    city.append("path") 
    .attr("class", "line") 
    .attr("d", function(d) { return line(d.values); }) 
    .style("stroke", function(d) { return color(d.name); }); 

    city.append("text") 
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
    .attr("transform", function(d) { return "translate(" + x(d.value.days) + "," +  y(d.value.testRuns) + ")"; }) 
    .attr("x", 3) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.name; }); 

    }); 

但我需要它以這種形式：

我是新來D3。我使用的屬性僅適用於兩者。但它是以曲線形式出現的。任何幫助表示讚賞。感謝

Answer 1

問題是在變種線= d3.svg.line（）

.interpolate("basis") 
    .x(function(d) { return x(d.days); }) 
    .y(function(d) { return y(d.testRuns); }); 

它應改爲.interpolate("linear")，以獲得所需的效果。 維基鏈接解釋您可以獲得的所有類型的行： https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate

希望這有助於！