I am using d3 for the first time to make a line chart and have it working pretty well. However, The line looks not anti-aliased (there are jagged edges) and the text doesn't look crisp.

I have the following styles of the line graphs:

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

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

Anything I am missing to make this look cleaner? Thanks.

I am using d3 for the first time to make a line chart and have it working pretty well. However, The line looks not anti-aliased (there are jagged edges) and the text doesn't look crisp.

I have the following styles of the line graphs:

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

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

Anything I am missing to make this look cleaner? Thanks.

• javascript
• css
• asp
• d3.js

3 Answers 3

It looks as if there has been some unusual styles applied to the entire graph. We would probably want to see the full code to resolve it pletely.

However, there is obviously no anti-aliasing on the graph so as a start, it seems possible that the line for your graph will be drawn as a `path'. Therefore try changing;

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

to;

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

The stroke style is there just in case you don't have a color set in the styles when you draw the line, but it seems likely that you do.

Alternativly, try setting the;

shape-rendering: crispEdges;

to

shape-rendering: auto;

or even

shape-rendering: geometricPrecision;

Once you start seeing the difference you're looking for start isolating the shapes to apply the correct style to the correct elements.

Try setting and see if it applies anti-aliasing on the line:

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

Thank you for your help - unfortunately the problem was in code that I didn't post. I had my display code in a loop, so for each point in the graph it was outputting another full graph. Confusingly, this led to the graph overlap, meaning the output didn't e in a deterministic way.