d3.v5.min.js：2错误：＆lt; path＆gt;属性d：预期moveto路径命令（m＆＃x27; or＆＃x27; or＆＆＆＃x27; M＆＃x27;），＆quort函数a（a）{va＆quest

Question

我正在尝试用D3.j绘制多行图，但是我遇到了这个错误：

错误：属性d：预期moveto路径命令（'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的新手，这不是一个容易使用的库

Answer 1

设置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）
    。进入（）
    .append（“路径”）
      .attr（“填充”，“无”）
      .attr（“ stroke”，功能（d）
      .Attr（“卒中”，1.5）
      .attr（“ D”，行）