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

感謝您的幫助-不幸的是，問題出在我未發布的代碼中。 我的顯示代碼處於一個循環中，因此對於圖形中的每個點，它都會輸出另一個完整圖形。 令人困惑的是，這導致圖形重疊，這意味着輸出不是確定性的。