我正在嘗試使用 d3.js 繪制多線圖，但出現此錯誤：
錯誤：屬性 d：預期的移動路徑命令（'M' 或 'm'），“函式 t(t){va...”。
我已經堅持了一段時間，并嘗試了我能想到的一切，以幫助您進行反思，在下面找到我使用的代碼。
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
const dateParser = d3.timeFormat("%Y-%m-%d %H:%M:%S");
data.forEach(function(d) {
d.ts = dateParser(new Date(d.ts));
d.value = parseFloat(d.value)
});
// append the svg object to the body of the page
var svg = d3.select("#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 ")");
//Read the data
// group the data: I want to draw one line per group
var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor
.key(function(d) { return d.key;})
.entries(data);
// Add X axis --> it is a date format
var x = d3.scaleLinear()
.domain(d3.extent(data, function(d) { return d.ts; }))
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," height ")")
.call(d3.axisBottom(x).ticks(5));
// Add Y axis
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.value; })])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
// color palette
var res = sumstat.map(function(d){ return d.key }) // list of group names
var color = d3.scaleOrdinal()
.domain(res).range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])
// Draw the line
svg.selectAll(".line")
.data(sumstat)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", function(d){ return color(d.key) })
.attr("stroke-width", 1.5)
.attr("d", function(d){
return d3.line()
.x(function(d) { return x(d.ts); })
.y(function(d) { return y(d.value); })
})
如果我正在查看的示例是此鏈接，我無法弄清楚我做錯了什么。我對 d3 相當陌生，它不是一個易于使用的庫
uj5u.com熱心網友回復：
當您設定d屬性時，您從資料鏈接函式回傳線生成器本身，但您無法執行它。配置生成器并執行它是一個兩步程序：
首先，構建和配置生成器（
line是一個函式）var line = d3.line() .x(function(d) { return x(d.ts); }) .y(function(d) { return y(d.value); })然后，將函式傳遞給
attr()，因此它將被執行為line(d)svg.selectAll(".line") .data(sumstat) .enter() .append("path") .attr("fill", "none") .attr("stroke", function(d){ return color(d.key) }) .attr("stroke-width", 1.5) .attr("d", line)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496730.html
標籤：javascript svg d3.js