d3 clipPath - why is it cutting top of charts off? [duplicate]

问题

I have a graphic with three line graphs on it.

I've added a single clipPath to the chart, covering all three line graphs. But the top of each line chart is being chopped off.

I've added .nice() to the y axes, based on other SO answers, which has helped but not fixed the problem. When you zoom in with the time widget, the effect is very obvious: at the highest point of the line, the 2px line is being thinned. Getting rid of the attribute for clip-path returns the lines to their proper effect.

cG.append("path")
    .attr("class","line line1")
    .attr("stroke",palette.basic[0])//predicted
    .attr("clip-path", "url(#clip)")
    .attr("d",line1[q](pricesPredicted));

Does anyone know why this is happening or how to stop it?

Thanks

回答1:

The problem is that the clipPath and the elements you are clipping are not defined in the same coordinate system and are not subject to the same transforms.

All 3 charts are drawn starting from the top left corner. Imagine them all drawn on top of each other.

Then, the clipPath is applied and the charts are cut off.

Finally the charts are translated to their place.

Here's an example:

<svg>
  <defs>
    <clipPath id="clipPath">
      <rect x="0" y="0" width="100" height="100" />
    </clipPath>
  </defs>

  <circle cx="10" cy="10" r="20" style="clip-path: url(#clipPath);" transform="translate(10 10)" />
</svg>

You should try and apply the same transform to the clipPath that you are applying to your charts.

来源：https://stackoverflow.com/questions/38076897/d3-clippath-why-is-it-cutting-top-of-charts-off

标签

javascript

d3.js

clip