Javascript 如何绘制D3.js甘特图

我对D3js非常陌生，我正在尝试绘制甘特图。我有下面的代码，这给了我一个图表，但它看不到任何接近我预期的图表。如果有人能帮我解决我在下面代码中犯的错误，那将是非常有帮助的。 这是我现有的甘特图代码：

风险值数据=[{ 姓名:A,， 价值：1， 价值2:2 }, { 姓名:B,， 价值：4， 价值2:5 }, { 姓名:C,， 数值：7， 价值2:9 }, { 姓名:D,， 价值：2， 价值2:7 }, { 姓名:E,， 价值：1， 价值2:1 }, { 姓名:F,， 数值：5， 价值2:2 }] var保证金={ 前30名， 右:40,， 底部：10， 左：10 }, 宽度=520-边距.左-边距.右， 高度=260-margin.top-margin.bottom； var x=d3.scaleLinear .范围[0，宽度] 变量y=d3.缩放带 .rangeRound[0，高度] .填充 var xAxis=d3.axisTopx； var svg=d3.selectbarchart.appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attransform，translate+margin.left+，+margin.top+； x、 域[-10,10] y、 domaindata.Mapd函数{ 返回d.name； }; svg.selectAll.bar .数据 .enter.appendrect .职业，酒吧 .attrx，函数d{ 返回xMath.min0，d.value； } .属性，函数d{ 返回yd.name； } .attrwidth，函数d{ 返回Math.absxd.value-x0； } .身高13； svg.selectAll.bar2 .数据 .enter.appendrect .attrclass，bar2 .attrx，函数d{ 返回xMath.min0，-d.value2； } .属性，函数d{ 返回yd.name； } .attrwidth，函数d{ 返回Math.absx-d.value2-x0； } .身高13； svg.appendg .attrclass，x轴 .attr'transform'，'translate0'，+height+ .callxAxis； svg.appendg .属性类，y轴 .附录 .x1，x0 .x2，x0 .attry2，高度； 函数类型{ d、 值=+d.值； 返回d； }

---

感谢@Tushar为我指出了这个例子。我能够完善我的图表。下面是经过改进的代码

<script>
                    data = [{
                        name: "A",
                        value: 1,
                        value2: 2
                    }, {
                        name: "B",
                        value: 4,
                        value2: 5
                    }, {
                        name: "C",
                        value: 7,
                        value2: 9
                    }, {
                        name: "D",
                        value: 2,
                        value2: 7
                    }, {
                        name: "E",
                        value: 1,
                        value2: 1
                    }, {
                        name: "F",
                        value: 5,
                        value2: 2
                    }]

                    var margin = {
                        top: 35,
                        right: 20,
                        bottom: 20,
                        left: 30
                    },
                        width = 580 - margin.left - margin.right,
                        height = 260 - margin.top - margin.bottom;

                    var x = d3.scaleLinear()
                        .range([0, width])

                    var y = d3.scaleBand()
                        .rangeRound([0, height])
                        .padding(.3)

                    var xAxis = d3.axisTop(x);
                    // gridlines in x axis function
                    function make_x_gridlines() {
                        return d3.axisBottom(x)
                            .ticks(40)
                    }

                    var svg = d3.select("#barchart").append("svg")
                        .attr("width", 585)
                        .attr("height", 270)
                        .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                    x.domain([-10, 10])
                    y.domain(data.map(function (d) {
                        return d.name;
                    }));

                    svg.selectAll(".bar")
                        .data(data)
                        .enter().append("rect")
                        .attr("class", "bar")
                        .attr("x", function (d) {
                            return x(Math.min(0, d.value));
                        })
                        .attr("y", function (d) {
                            return y(d.name);
                        })
                        .attr("width", function (d) {
                            return Math.abs(x(d.value) - x(0));
                        })
                        .attr("height", 13);

                    svg.selectAll(".bar2")
                        .data(data)
                        .enter().append("rect")
                        .attr("class", "bar2")
                        .attr("x", function (d) {
                            return x(Math.min(0, -d.value2));
                        })
                        .attr("y", function (d) {
                            return y(d.name);
                        })
                        .attr("width", function (d) {
                            return Math.abs(x(-d.value2) - x(0));
                        })
                        .attr("height", 13);


                    //svg.append("g")
                    //    .attr("class", "x axis")
                    //    .attr('transform', 'translate(0,' + (height) + ')')
                    //            .call(xAxis);
                    svg.append("g")
                        .attr("transform", "translate(0," + height + ")")
                        .call(d3.axisBottom(x));

                    // add the X gridlines
                    svg.append("g")
                        .attr("class", "grid")
                        .attr("transform", "translate(0," + height + ")")
                        .call(make_x_gridlines()
                            .tickSize(-height)
                            .tickFormat("")
                        )

                    svg.append("g")
                        .call(d3.axisLeft(y));
                    //svg.append("g")
                    //    .attr("class", "y axis")
                    //    .append("line")
                    //    .attr("x1", x(0))
                    //    .attr("x2", x(0))
                    //    .attr("y2", height);


                    function type(d) {
                        d.value = +d.value;
                        return d;
                    }
                </script>

---

它们看起来很像，你说的问题是什么，这是你期望的图表，但是在你的代码中没有证据表明你已经尝试实现了很多这些特性。你到底有什么问题？请参考此-