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;
}

至;

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

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

或者，尝试设置;

shape-rendering: crispEdges;

至

shape-rendering: auto;

甚至

shape-rendering: geometricPrecision;

一旦发现差异，您就需要开始隔离形状，以将正确的样式应用于正确的元素。

关于javascript - D3折线图不清晰，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26148581/