Vue.js 如何在d3中制作多系列条形图？

我有两个显示相同数据的条形图。其中一个为每个x轴标签显示一个条，该标签是一个输出集和一个输入集的总和。我的另一个需要将输入和输出数据分成两个条，每个x轴标签相邻

我希望它看起来怎么样：

从我在其他示例中看到的情况来看，数据合并到单个数组中，然后成对绘制。我试图将两个集合并为一个集，但无法使其工作

以下是我如何绘制栏：

svg.selectAll(".bar")
                .data(options.series[i].data)
                .enter().append("rect")
                .attr("class", "bar")
                .attr("class", function(d) {
                    if (d < 0) {
                        return "bar positive";
                    } else {
                        return "bar negative";
                    }
                })
                .attr("height", function(d) {
                    return Math.abs(yScale(d) - yScale(0));
                })
                .attr("y", function(d) {
                    if (d > 0) {
                        return yScale(d);
                    } else {
                        return yScale(0);
                    }
                    // return yScale(d)
                })
                .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, j);
                })
                .on('mouseout', function(d, j){
                    d3.select(this).style("opacity", 1);
                    tip.hide(d, j);
                })
                .on("click", function(d, j) {
                  zoomInD3(vm, options.labels[j]);
                });

svg.selectAll（“.bar”）
.data（options.series[i].data）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“类”，函数（d）{
if（d<0）{
返回“条正”；
}否则{
返回“条负”；
}
})
.attr（“高度”，功能（d）{
返回Math.abs（yScale（d）-yScale（0））；
})
.attr（“y”，函数（d）{
如果（d>0）{
返回yScale（d）；
}否则{
返回yScale（0）；
}
//返回Y刻度（d）
})
.attr（“宽度”（xScale.bandwidth（））
.attr（“x”，函数（d，j）{
返回xScale（options.labels[j]）
})
.on（'mouseover'，函数（d，j）{
d3.选择（此）.样式（“不透明度”，0.6）；
提示：show（d，j）；
})
.on（'mouseout'，函数（d，j）{
d3.选择（这个）样式（“不透明度”，1）；
提示：隐藏（d，j）；
})
.开启（“点击”，功能（d，j）{
zoomInD3（vm，options.labels[j]）；
});

我不想要堆叠的条形图，而是并排的图表。有什么有用的建议吗

---

我的数据存储在一个数组中，其中只包含值。

我实际上已经计算出来了。我将两个数据数组组合成一个具有类名的对象列表

//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]);
            });

//将两组数据合并到一个对象列表中
var combinedList=[]
对于（var i=0；i0）{
返回yScale（d.first）；
}否则{
返回yScale（0）；
}
})
.attr（“宽度”（xScale.bandwidth（））
.attr（“x”，函数（d，j）{
返回xScale（options.labels[j]）
})
.on（'mouseover'，函数（d，j）{
d3.选择（此）.样式（“不透明度”，0.6）；
提示显示（d.first，j）；
})
.on（'mouseout'，函数（d，j）{
d3.选择（这个）样式（“不透明度”，1）；
提示：隐藏（d.first，j）；
})
.开启（“点击”，功能（d，j）{
zoomInD3（vm，options.labels[j]）；
});
//在对象中创建“第二个”元素的rect
var bar2=multigraph.append（“rect”）
.attr（“类”、“第二类”）
.attr（“类”、“条正”）
.attr（“高度”，功能（d）{
返回Math.abs（yScale（d.second）-yScale（0））；
})
.attr（“y”，函数（d）{
如果（d.秒>0）{
返回Y刻度（d.s）；
}否则{
返回yScale（0）；
}
})
.attr（“宽度”（xScale.bandwidth（））
.attr（“x”，函数（d，j）{
返回xScale（options.labels[j]）
})
.on（'mouseover'，函数（d，j）{
d3.选择（此）.样式（“不透明度”，0.6）；
提示显示（d.second，j）；
})
.on（'mouseout'，函数（d，j）{
d3.选择（这个）样式（“不透明度”，1）；
提示隐藏（d.second，j）；
})
.开启（“点击”，功能（d，j）{
zoomInD3（vm，options.labels[j]）；
});

仍然需要根据杆之间的距离在X轴上进行调整。基本上，如果在可调用对象中包含元素，则可以通过class属性调用数据

---

因此，当检查页面元素的检查器时，很明显存在一个包含两个“rect”对象的“g”容器。

我实际上已经找到了它。我将两个数据数组组合成一个具有类名的对象列表

//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]);
            });

//将两组数据合并到一个对象列表中
var combinedList=[]
对于（var i=0；i