Javascript D3折线图不清晰

我第一次使用d3来制作一个折线图，它运行得很好。但是，线条看起来没有抗锯齿（有锯齿状的边），文本看起来也不清晰

我有以下线型图：

.axis path, .axis line {
    fill: none;
    stroke: #757575;
    shape-rendering: crispEdges;
    stroke-width: 2px;
}

.line {
    fill: none;
    stroke-width: 3px;
}

我缺少什么可以让这看起来更干净的东西？谢谢

---

尝试设置并查看是否在行上应用抗锯齿：

.line {
    fill: none;
    stroke-width: 3px;
    shape-rendering: crispEdges;
}

---

尝试设置并查看是否在行上应用抗锯齿：

.line {
    fill: none;
    stroke-width: 3px;
    shape-rendering: crispEdges;
}

---

看起来似乎有一些不寻常的样式应用于整个图形。 我们可能希望看到完整的代码来完全解决它

但是，图形上显然没有消除混叠，因此首先，您的图形的线条可能会被绘制为“路径”。因此，尝试改变

.line {
    fill: none;
    stroke-width: 3px;
}

到

笔划

样式就在那里，以防你在画线时没有在样式中设置颜色，但看起来很可能是这样

另一种方法是，尝试设置

shape-rendering: crispEdges;

到

甚至

shape-rendering: geometricPrecision;

---

一旦你开始看到你要寻找的差异，就开始隔离形状，将正确的样式应用于正确的元素。

看起来似乎有一些不寻常的样式应用于整个图形。 我们可能希望看到完整的代码来完全解决它

但是，图形上显然没有消除混叠，因此首先，您的图形的线条可能会被绘制为“路径”。因此，尝试改变

.line {
    fill: none;
    stroke-width: 3px;
}

到

笔划

样式就在那里，以防你在画线时没有在样式中设置颜色，但看起来很可能是这样

另一种方法是，尝试设置

shape-rendering: crispEdges;

到

甚至

shape-rendering: geometricPrecision;

---

一旦你开始看到你想要的差异，就开始隔离形状，将正确的样式应用到正确的元素上。

谢谢你的帮助-不幸的是，问题出在我没有发布的代码中。我的显示代码在一个循环中，因此对于图形中的每个点，它都输出另一个完整的图形。令人困惑的是，这导致了图形重叠，这意味着输出不是以确定的方式出现的

感谢您的帮助-不幸的是，问题出在我没有发布的代码中。我的显示代码在一个循环中，因此对于图形中的每个点，它都输出另一个完整的图形。令人困惑的是，这导致了图形重叠，这意味着输出不是以确定的方式出现的