Javascript Ng repeat on指令创建重复的DOM元素

我有一个在DOM上呈现d3散点图指令的指令。我还有一个

ng绑定

绑定到一个

数组

，该数组列出了为给定散点图提供的输入。这两个元素（散点图和输入）都位于带有

ng repeat

的

span

内部，如下所示：

<section>
    <h3>Saved Charts</h3>
        <div class="saved-charts-repeat" ng-repeat="s in savedCharts">
                <p ng-bind="s.input"></p>
                <scatter-template input="s.chart"></scatter-template>
        </div>
</section>

$scope.savedCharts = [
        {
            input: [[array], [array]], 
            chart: [{object}, {object}, {object}]
        },
        {
            input: [[array]], 
            chart: [{object}, {object}]
        }
 ];

s.input

将数组绑定到DOM，

s.chart

将图表对象传递到

散点模板

指令

运行此命令时，输出如下所示：

在这种情况下，“GW”是

s.input

数组（每个数组都是一个数组）

它们应该是内联的，并贯穿整个页面。我检查了元素，发现所有图表都出现在

ng repeat

的第一个实例中，并且

s.input

s被适当地分散

从chromedevtools（包装器的第一个实例）查看下面的内容，

。保存的图表重复保存所有图表，但只保存一个输入


为什么我的输入在整个重复过程中被分散，而我的图表却在第一时间堆积起来

编辑

这是我的CSS

.saved-charts-repeat { //ngrepeat
  .inputs {
  }
  scatter-template {
    display: block;
  }
  svg {
    height: 300px;
    width: 300px;
    min-width: 320px;
  }

编辑2

下面是一个代码笔，它重现了我的问题：
问题在于指令中的这行代码：

var svg = d3.select('scatter-template')

d3.select（）
返回与选择器匹配的第一个元素。在这种情况下，它将返回中继器中的第一个
元素，这就是为什么所有SVG都会在第一个
元素中结束

您要做的是：

var svg = d3.select(el[0])

d3.select（）
也可以直接引用元素。指令中Angular的
link（）
函数接收指令元素的jQuery包装实例，因此我们可以通过
el[0]
将原始元素传递给D3，您可以发布指向某种完整示例的链接吗？它可以是一个简化的jsFiddle，甚至是真实的东西。很难说这是CSS问题、D3.js问题还是实际的AngularJS问题。请看下面我的答案。非常感谢。我在另一个指令中创建了一个类似的散点图，并认为这将节省我复制并粘贴到这个新指令中的时间。这并没有节省我的时间，而且让我头疼。如果没有你的帮助，我永远不会明白这一点。