javascript - D3 图表似乎超出了 x 轴(画笔效果的裁剪问题)

Question

我的 D3.js 代码在这里:

https://jsfiddle.net/xyt4pbpo/11/

我试图将图形注入(inject)到 Rails 应用程序中的这个 haml View 容器中:

%section.content
.row
    .col-xs-12
      .panel.panel-primary
        .panel-heading
          %h3.panel-title
            %i.fa.fa-bar-chart-o
            Charging Sessions
        .panel-body
      #charging-sessions-chart

我知道问题始于第 119 行，我将 d3.select 更改为 #charging-sessions-chart，但问题是我需要将其嵌入到该 ID 中:

var svg = d3.select("#charging-sessions-chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);

我的问题是如何解决这个剪辑问题？

编辑:这是发生的事情的照片:

/image/0cWQZ.jpg

EDIT2:在我使用刷牙功能之前，图表看起来不错

EDIT3:该图在 Rails 环境之外运行得非常好。必须与 Rails 应用程序相关。

Answer 1

我创建了一个工作 plunk 。我修改了第 310 行，将 clip-path 添加为 attribute就行了，因为它不是 css 样式。

顺便说一句，我会亲自创建一个组来包含所有线条并在其上设置剪辑路径，但设计是您的:-)。