在D3.js中创建自定义折线图

Question

试图创建自定义折线图，其中只有一条简单线条，带有渐变背景 - 线条各部分的背景根据在那点（数值的变化保证是温和的）。

我遇到了基本配置问题。这是我的代码：

JS：

// General definitions 
var HEIGHT, MARGINS, WIDTH, formatDay, lineFunc, graph, graph_data, weekdays, x, xAxis, y, yAxis; 
WIDTH = 360; 
HEIGHT = 130; 
MARGINS = { 
    top: 20, 
    right: 30, 
    bottom: 20, 
    left: 20 
}; 

graph = d3.select("#graph"); 

// Define Axes 
weekdays = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; 
formatDay = function(d) { 
    return weekdays[d % 6]; 
}; 

x = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([ 
    d3.min(graph_data, function(d) { 
    return d.x; 
    }), d3.max(graph_data, function(d) { 
    return d.x + 1; 
    }) 
]); 

y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([ 
    d3.min(graph_data, function(d) { 
    return d.y; 
    }), d3.max(graph_data, function(d) { 
    return d.y; 
    }) 
]); 
xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(formatDay); 
yAxis = d3.svg.axis().scale(y).tickSize(10).orient("left"); 

// Line Function 
lineFunc = d3.svg.line().x(function(d) { 
    return x(d.x); 
}).y(function(d) { 
    return y(d.y); 
}).interpolate("basis"); 

// Define Line Gradient 
graph.append("linearGradient").attr("id", "line-gradient").attr("gradientUnits", "userSpaceOnUse").attr("x1", 0).attr("y1", y(0)).attr("x2", 0).attr("y2", y(200)).selectAll("stop").data([ 
    { 
    offset: "0%", 
    color: "#F0A794" 
    }, { 
    offset: "20%", 
    color: "#F0A794" 
    }, { 
    offset: "20%", 
    color: "#E6A36A" 
    }, { 
    offset: "40%", 
    color: "#E6A36A" 
    }, { 
    offset: "40%", 
    color: "#CE9BD2" 
    }, { 
    offset: "62%", 
    color: "#CE9BD2" 
    }, { 
    offset: "62%", 
    color: "#AA96EE" 
    }, { 
    offset: "82%", 
    color: "#AA96EE" 
    }, { 
    offset: "82%", 
    color: "#689BE7" 
    }, { 
    offset: "90%", 
    color: "#689BE7" 
    }, { 
    offset: "90%", 
    color: "1AA1DF" 
    }, { 
    offset: "100%", 
    color: "1AA1DF" 
    } 
]).enter().append("stop").attr("offset", function(d) { 
    return d.offset; 
}).attr("stop-color", function(d) { 
    return d.color; 
}); 

// Draw Line 
graph.append("svg:path").attr("d", lineFunc(graph_data)); 

// Draw Axes 
graph.append("svg:g").attr("class", "x axis").attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")").call(xAxis); 
graph.append("svg:g").attr("class", "y axis").attr("transform", "translate(" + MARGINS.left + ",0)").call(yAxis); 

风格

#line-gradient { 
    fill: none; 
    stroke: url(#line-gradient); 
    stroke-width: 7px; 
    stroke-linejoin: "round"; 
} 

的样本数据

graph_data = [{ 
    x: 1, 
    y: 22 
}, { 
    x: 2, 
    y: 20 
}, { 
    x: 3, 
    y: 10 
}, { 
    x: 4, 
    y: 40 
}, { 
    x: 5, 
    y: 5 
}, { 
    x: 6, 
    y: 30 
}, { 
    x: 7, 
    y: 60 
}] 

什么我得到这个样子的：

​​

任你D3.js高手能告诉我我在做什么错了，有什么需要，以改变我的线是一条线，而不是一个区域，具有上面解释的线条背景渐变和圆边？

非常感谢提前！

Answer 1

这里有一个小提琴：http://jsfiddle.net/henbox/gu4y7fk8/

你应该给path类的名称，如：

graph.append("svg:path") 
    .attr("class","chartpath") 
    .attr("d", lineFunc(graph_data)); 

然后是CSS样式你应该是path元素上，而不是lineargradient元素

.chartpath { /*note: not #line-gradient*/ 
    fill: none; 
    stroke: url(#line-gradient); 
    stroke-width: 7px; 
    stroke-linejoin: "round"; 
} 

我还修复了一些其他的东西：

1. 上的一对颜色代码的丢失#，所以改变（color: "1AA1DF"到color: "#1AA1DF"
2. 我改变最大的y值的梯度从200至60，从而使该行的改变颜色梯度是更在本例中（.attr("y2", y(200))到.attr("y2", y(60))）