如何在条形图d3.js上添加水平线条

Question

我在http://jsbin.com/cunecazene/edit?html,output下面的链接中有一个条形图 条形图由数组中的类型和计数生成。

 var data = [
   { type: 'type 1', count: 10, comp: 12}, 
   { type: 'type 2', count: 20, comp: 22},
   { type: 'type 3', count: 30, comp: 37},
   { type: 'type 4', count: 35, comp: 31}
  ];

我想知道是否有任何方法可以在条形图上添加线条，如图中的示例，使用数组中的“comp”。 感谢您的帮助！

Answer 1

备选方案：

• d3.select一些<line>元素，将数据绑定到它们.enter，并使用您的xScale和yScale呈现它们，所有这些都非常相似到目前为止您对<rect>所做的事情。

  请记住put the two in different layer groups，以便线条始终显示在矩形上。

• 在.enter上，添加SVG group element (<g>)并将<rect>和<line>追加到那个，然后在更新时，将其定位只需一次操作。

  这需要更多的思考才能做到正确，但由于需要较少的数据绑定和DOM操作，因此保持文档树更清晰，性能更高。