How to plot D3.js gantt chart

Question

I'm very new to D3js and I'm trying to plot a gantt chart. I have the below code which gives me a chart but it doesn't look anywhere near to my expected chart. It would be very helpful if anyone can help me where I'm making a mistake with the below code. This is my existing code for gantt chart:

var 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: 30,
    right: 40,
    bottom: 10,
    left: 10
},
    width = 520 - 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);

var svg = d3.select("#barchart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .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("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 src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="barchart"></div>

and this is my expected chart. Expected gantt chart

Answer 1

Thank you @Tushar for pointing me to the example. I was able to refine my chart. The below is the refined code.

<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>