在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))）