Question: 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.

![enter image description here](https://i.stack.imgur.com/egw2o.png)

Answer: 
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 completely. 

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

```