D3 图似乎超出了 x 轴（画笔效果的剪切问题）答案

【问题标题】：D3 graph seems to extend beyond x-axis (clipping issue with brush effect)D3 图似乎超出了 x 轴（画笔效果的剪切问题）
【发布时间】：2016-01-21 05:35:32
【问题描述】：

我的 D3.js 代码在这里：

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

我正在尝试将图表注入到 rails 应用程序中的这个 haml 视图容器中：

%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);

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

编辑：这是发生了什么的照片：

http://imgur.com/a8o9xX3

EDIT2：在我使用刷子功能之前，图表看起来很好

EDIT3：该图在 rails 环境之外工作得非常好。一定是 Rails 应用程序的东西。

【问题讨论】：

刚刚创建了一个plunk，我觉得没问题。有什么问题吗？
@HuguesStefanski 在您使用画笔功能之前，该图表很好，请参阅上面的附图以获得更好的想法

标签： javascript ruby-on-rails d3.js

【解决方案1】：

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

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

【讨论】：

谢谢！我是该网站的新手，因此无法投票，但此解决方案有效。非常感谢您坚持这个问题。