我的 d3 折线图看起来很奇怪，我不知道出了什么问题

Question

我想知道是什么原因造成的，我也想在图表中插入另一条线，请问正确的做法是什么？我知道如何更新数据，但不知道如何制作多行，感谢您的帮助，谢谢！ D3.js 是一个 JavaScript 库，用于在 Web 浏览器中生成动态、交互式数据可视化。它使用可缩放矢量图形、HTML5 和级联样式表标准。它是早期 Protovis 框架的继承者。

const data = [{
    name: "A",
    x: 10,
  },
  {
    name: "B",
    x: 22,
  },
  {
    name: "C",
    x: 33,
  },
  {
    name: "D",
    x: 20,
  },
  {
    name: "E",
    x: 21,
  },
];
//No.1 define the svg
let graphWidth = 600,
  graphHeight = 450;
let margin = {
  top: 30,
  right: 10,
  bottom: 30,
  left: 85
};
let totalWidth = graphWidth + margin.left + margin.right,
  totalHeight = graphHeight + margin.top + margin.bottom;
let svg = d3
  .select("body")
  .append("svg")
  .attr("width", totalWidth)
  .attr("height", totalHeight);
//No.2 define mainGraph
let mainGraph = svg
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//No.3 define axises
let categoriesNames = data.map((d) => d.name);
let xScale = d3
  .scalePoint()
  .domain(categoriesNames)
  .range([0, graphWidth]); // scalepoint make the axis starts with value compared with scaleBand
var yScale = d3
  .scaleLinear()
  .range([graphHeight, 0])
  .domain([0, d3.max(data, (data) => data.x)]); //* If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword

//No.4 set axises
mainGraph
  .append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + graphHeight + ")")
  .call(d3.axisBottom(xScale));
mainGraph.append("g").attr("class", "y axis").call(d3.axisLeft(yScale));
//No.5 make lines
var line = d3
  .line()
  .x(function(d) {
    return xScale(d.name);
  }) // set the x values for the line generator
  .y(function(d) {
    return yScale(d.x);
  }) // set the y values for the line generator
  .curve(d3.curveMonotoneX); // apply smoothing to the line

mainGraph
  .append("path")
  .datum(data) // 10. Binds data to the line
  .attr("class", "line") // Assign a class for styling
  .attr("d", line); // 11. Calls the line generator

<script src="https://d3js.org/d3.v6.min.js"></script>

Answer 1

您需要为 path 设置 fill: none; 和 stroke: <your line colour here>。否则，它认为它是一个封闭的形状并尝试填充它。

那是因为一般情况下，path是用来画two-dimensional形的。假定只有 line 没有二维。另见 the MDN docs

const data = [{
    name: "A",
    x: 10,
  },
  {
    name: "B",
    x: 22,
  },
  {
    name: "C",
    x: 33,
  },
  {
    name: "D",
    x: 20,
  },
  {
    name: "E",
    x: 21,
  },
];
//No.1 define the svg
let graphWidth = 600,
  graphHeight = 450;
let margin = {
  top: 30,
  right: 10,
  bottom: 30,
  left: 85
};
let totalWidth = graphWidth + margin.left + margin.right,
  totalHeight = graphHeight + margin.top + margin.bottom;
let svg = d3
  .select("body")
  .append("svg")
  .attr("width", totalWidth)
  .attr("height", totalHeight);
//No.2 define mainGraph
let mainGraph = svg
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//No.3 define axises
let categoriesNames = data.map((d) => d.name);
let xScale = d3
  .scalePoint()
  .domain(categoriesNames)
  .range([0, graphWidth]); // scalepoint make the axis starts with value compared with scaleBand
var yScale = d3
  .scaleLinear()
  .range([graphHeight, 0])
  .domain([0, d3.max(data, (data) => data.x)]); //* If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword

//No.4 set axises
mainGraph
  .append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + graphHeight + ")")
  .call(d3.axisBottom(xScale));
mainGraph.append("g").attr("class", "y axis").call(d3.axisLeft(yScale));
//No.5 make lines
var line = d3
  .line()
  .x(function(d) {
    return xScale(d.name);
  }) // set the x values for the line generator
  .y(function(d) {
    return yScale(d.x);
  }) // set the y values for the line generator
  .curve(d3.curveMonotoneX); // apply smoothing to the line

mainGraph
  .append("path")
  .datum(data) // 10. Binds data to the line
  .attr("class", "line") // Assign a class for styling
  .attr("d", line); // 11. Calls the line generator

.line {
  stroke: blue;
  fill: none;
}

<script src="https://d3js.org/d3.v6.min.js"></script>

我的 d3 折线图看起来很奇怪，我不知道出了什么问题

my d3 line chart looks weird, I can't figure out what's wrong

linechart

d3.js