Svg 使用D3.js自定义轴和图例

我的数据集是

var data = [
        [2010,"Internet",19],
        [2010,"Water",20],
        [2011,"Internet",36],
        [2011,"Water"‌​,44],
        [2012,"Internet",51],
        [2012,"Water",53],
        [2013,"Internet",39],
        [2013,"Water",30]
       ]

var allHeights = [-250,-215,-185,-140, -85, 40, 85, 140, 185, 215, 250];
var allColors = [
            d3.rgb(203,23,23),d3.rgb(108,74,246),d3.rgb(9,235,175),d3.rgb(159,172,38),d3.rgb(236,105,18),
            d3.rgb(137,195,95),d3.rgb(241,137,108),d3.rgb(253,233,127),d3.rgb(109,151,216),d3.rgb(15,199,58)
         ];

我想在svg的最右边画一个y轴。轴应划分为与“所有高度”对应的点，每个点应标有 年份（即数据[i][0]）

我想为数据[I][2]绘制一个图例，并用AllColor[I]填充每个图例

---

请帮助

您能告诉我们您迄今为止尝试了什么吗？分组年份、标题和图例背后的原因是什么？但要区分身高和颜色？如何将所有链接数据存储在数据数组中？或者可能作为JSON以提高可读性？到目前为止，我的代码

var width=2000；var高度=500；var canvas=d3.select（“body”）.append（“svg”）.attr（“width”，width）.attr（“height”，height）；var group=canvas.append（“g”）.attr（“transform”、“translate（0200）”）；var yAxis=group.append（“line”）.attr（“x1”，0）.attr（“y1”，-200）.attr（“x2”，0）.attr（“y2”，高度）.attr（“笔划宽度”，2）.attr（“笔划”，“黑色”）我想从“allHeights”数组中断开高度处的yAxis，并使用数据[I][0]中的数据对它们进行编号。很抱歉缺少缩进。。。我真是太天真了@JanneKlouman:-我的目标是以半径为数据[2]绘制圆，圆心的y坐标为距所有高度的高度。我将使用allHeights数组计算中心的x坐标。然后我将用AllColor中的颜色填充每个圆圈。我还需要一个图例来标记数据[1]。