d3 chart is going out of the box, last circle is not coming properly

问题

My Chart is going out of the box, If you notice last circle is cutting and going out of the described width, I have tried to give transform but it's not looking good,

scatter
  .append("path")
  .datum(data)
  .attr("class", "line")
  .attr("transform", "translate(50,0)")
  .attr("d", line);

scatter
      .selectAll(".foo")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "foo")
      .attr("transform", "translate(50,0)")
      .attr("cx", function(d) {
        return xScale(d.startTime);
      })

I tried to give .attr("transform", "translate(50,0)") but then first circle was cutting off. How I can shrink/transform a little so both the first and last points looks good and i have some space as well.

Can someone point what I am missing ?

Code sand box here - https://codesandbox.io/s/proud-firefly-xy1py

Thanks..

回答1:

After discussion in the comments provided for answer by richardwestenra, we came up with an alternative solution which reduces the margin.right from the width in a number of places to make the plot appear within the drawing area and not be clipped by the clip path.

The solution is at https://codesandbox.io/s/vigorous-mcclintock-hsmgu

回答2:

It looks like the width of your clip path is the problem:

svg
  .append("defs")
  .append("SVG:clipPath")
  .attr("id", "clip")
  .append("SVG:rect")
  .attr("width", containerWidth)
  .attr("height", height)
  .attr("x", 40)
  .attr("y", 0);

It's currently at the same width as your overall SVG container, when it should be the width of the chart clip area (i.e. containerWidth - margin.left - margin.right). It's offset from the left with .attr("x", 40) so it's still clipping the line and circles from the left, but this means that it's extending beyond the right edge of the SVG by 40px so it's not clipping anything on the right side.

Try changing .attr("width", containerWidth) to .attr("width", width).

来源：https://stackoverflow.com/questions/60865922/d3-chart-is-going-out-of-the-box-last-circle-is-not-coming-properly

标签

javascript

d3.js

svg