Javascript 带堆叠条的连接线

通过使用kendo ui，我可以生成以下带有lines连接的stackbar，如下所示：

categoryAxis: {
        categories: ["a", "b", "c", "d", "e"],
        axisCrossingValues: [0, 0, 10, 10],
    },
    tooltip: {
        visible: true,
        format: "{0}%",
        template: "#= series.name #: #= value #"
    }

但是，我想用下面的横杆连接这些线。有可能在剑道UI中这样做吗？这里的关键特征是线条不在stackbar的中间，而是连接到边缘

如果在剑道UI中不可能，可以在d3库中完成，或者推荐什么

---

使用d3.js几乎不可能绘制任何与图形相关的内容；这不是一个图形库，而是一个图形绘制（nee，可视化）库，这是完全不同的事情。我删除了D3标签，因为这不是一个D3问题，因为它目前是。如果你想在D3中实现这一点，请发布你已经尝试过的和你正在努力解决的问题。也许这可以通过这一点实现。