[Vuejs]-How to make a multi-series bar chart in d3?

by

5👍

✅

I actually figured it out. I had combined my two data arrays into a list of objects with a class name.

//Combine both sets of data into a list of objects
var combinedList = []
for(var i = 0; i < xAxisLabels.length; i++) {
    var object = {first: options.series[i].data, second: options.series[i].data1}
    combinedList.push(object); //Push object into list
}
//Create container for the bar objects of class bar
var multigraph = svg.selectAll(".bar")
            .data(combinedList)
            .enter().append("g")
            .attr("class", "bar")
//Create a rect of the "first" element in object
var bar1 = multigraph.append("rect")
            .attr("class", "first")
            .attr("class","bar negative")
            .attr("height", function(d) {
                return Math.abs(yScale(d.fist) - yScale(0));
            })
            .attr("y", function(d) {
                if (d.first > 0) {
                    return yScale(d.first);
                } else {
                    return yScale(0);
                }
            })
            .attr("width", (xScale.bandwidth()))
            .attr("x", function(d, j) {
                return xScale(options.labels[j])
            })
            .on('mouseover', function(d, j){
                d3.select(this).style("opacity", 0.6);
                tip.show(d.first, j);
            })
            .on('mouseout', function(d, j){
                d3.select(this).style("opacity", 1);
                tip.hide(d.first, j);
            })
            .on("click", function(d, j) {
              zoomInD3(vm, options.labels[j]);
            });
//Create a rect of the "second" element in object
var bar2 = multigraph.append("rect")
            .attr("class", "second")
            .attr("class","bar positive")
            .attr("height", function(d) {
                return Math.abs(yScale(d.second) - yScale(0));
            })
            .attr("y", function(d) {
                if (d.second> 0) {
                    return yScale(d.second);
                } else {
                    return yScale(0);
                }
            })
            .attr("width", (xScale.bandwidth()))
            .attr("x", function(d, j) {
                return xScale(options.labels[j])
            })
            .on('mouseover', function(d, j){
                d3.select(this).style("opacity", 0.6);
                tip.show(d.second, j);
            })
            .on('mouseout', function(d, j){
                d3.select(this).style("opacity", 1);
                tip.hide(d.second, j);
            })
            .on("click", function(d, j) {
              zoomInD3(vm, options.labels[j]);
            });

Still would need to be adjusted on the xAxis based on how far apart the bars would be from each other. Basically having the elements in a callable object the data can become called form the class attribute.

So when checking the inspector for the page elements it will be clear that there is a “g” container that contains two “rect” objects.

👤C. Short

Leave a comment