D3线图不清晰

Question

我第一次使用d3制作折线图并使其工作得很好。但是，该线看起来没有消除锯齿（有锯齿状边缘），文字看起来不清晰。

我有以下样式的折线图：

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

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

我缺少什么使这看起来更干净？感谢。

Answer 1

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

然而，图表上显然没有抗锯齿，所以作为一个开始，你的图形的线条似乎可能被绘制为“路径”。因此，尝试改变;

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

到

path {
    stroke: steelblue;
    fill: none;
    stroke-width: 3px;
}

stroke样式就是为了防止您在绘制线条时没有在样式中设置颜色，但您可能会这样做。

另外，尝试设置;

shape-rendering: crispEdges;

到

shape-rendering: auto;

甚至

shape-rendering: geometricPrecision;

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

Answer 2

尝试设置并查看它是否在线上应用消除锯齿：

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

Answer 3

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