d3.js带2个纵轴和工具提示的水平堆叠条形图

我有一个任务，制作一个d3图形，应该像下图一样

我开始在codepen:中模拟图形，但遇到了两个我不知道如何解决的问题：

1） 如何使用人名（来自数据集）制作工具提示

2） 如何使用第二组值setOfValues创建第二个垂直轴

我的js代码：

var setOfValues = ["Value4", "Value5", "Value6"];
var margins = {
    top: 30,
    left: 100,
    right: 20,
    bottom: 0
};
var legendPanel = {
    width: 0
};
var width = 500 - margins.left - margins.right - legendPanel.width;
var height =  80 - margins.top - margins.bottom
var dataset = [{
        data: [{
            value: 'Value1',
            count: 3,
              people: "Anna, Maria, Peter",
        }, {
            value: 'Value2',
            count: 3,
              people: "Michael, Martin, Joe",
        }, {
            value: 'Value3',
            count: 2,
              people: "Martin, Joe",
        }]
    }, {
        data: [{
            value: 'Value1',
            count: 2,
              people: "Luis, Kim",
        }, {
            value: 'Value2',
            count: 1,
               people: "Richard",
        }, {
            value: 'Value3',
            count: 4,
               people: "Michael, Martin, Joe, Maria",
        }]  
    }
                    , {
        data: [{
            value: 'Value1',
            count: 1,
              people: "Linda",
        }, {
            value: 'Value2',
            count: 2,
               people: "Ben",
        }, {
            value: 'Value3',
            count: 0,
               people: "",
        }]  
    }
    ];

dataset = dataset.map(function (d) {
        return d.data.map(function (o, i) {
            return {
                y: o.count,
                x: o.value
            };
        });
    });
var stack = d3.layout.stack();

stack(dataset);

var dataset = dataset.map(function (group) {
    return group.map(function (d) {
        return {
            x: d.y,
            y: d.x,
            x0: d.y0
        };
    });
});

var numberOfPeople = 6;
var svg = d3.select('body')
        .append('svg')
        .attr('width', width + margins.left + margins.right + legendPanel.width)
        .attr('height', height + margins.top + margins.bottom)
        .append('g')
        .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
var xMax = numberOfPeople;

var xScale = d3.scale.linear()
        .domain([0, xMax])
        .range([0, width]);


var values = dataset[0].map(function (d) {
        return d.y;
    });

var yScale = d3.scale.ordinal()
        .domain(values)
        .rangeRoundBands([0, height], .2);

var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient('top')
          .tickFormat(function(d) { return parseInt(d, 10) })
          .ticks(xMax);

var yAxis = d3.svg.axis()
        .scale(yScale)
          .outerTickSize(0) 
        .orient('left');

var colors = d3.scale.ordinal().range(["#3E7EAB","#D89218","#EEEEEE"]);
var groups = svg.selectAll('g')
        .data(dataset)
        .enter()
        .append('g')
        .style('fill', function (d, i) {
        return colors(i);
    });


var rects = groups.selectAll('rect')
        .data(function (d) {return d; })
        .enter()
        .append('rect')
        .attr('x', function (d) {return xScale(d.x0);})
        .attr('y', function (d, i) {return yScale(d.y);})
        .attr('height', function (d) {return yScale.rangeBand();})
        .attr('width', function (d) {return xScale(d.x);})
        .on('mouseover', function (d) {
                var xPos = parseFloat(d3.select(this).attr('x')) / 2 + width / 2;
           var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() / 2;
            d3.select('#tooltip')
                    .style('left', xPos + 'px')
                    .style('top', yPos + 'px')
                    .select('#value')
         //Question 1: "How to show in tooltip names of people??"
                    .text("How to show here names of people??");
           d3.select('#tooltip').classed('hidden', false);
       })
        .on('mouseout', function () {d3.select('#tooltip').classed('hidden', true); });

svg.append('g')
    .attr('class', 'axis')
    .call(yAxis);

svg.append('g')
    .attr('class', 'axis')
    .call(xAxis);

守则的结果：

---

非常感谢您的帮助。

当您映射

数据集时，将
人员
属性添加到其中（并在第二个映射中执行相同操作）：

之后，您将在绑定数据中拥有
people
属性。因此，只需将
文本更改为：

.text(d.people);

以下是您的更新代码：


var setOfValues=[“Value4”、“Value5”、“Value6”]；
var保证金={
前30名，
左:100,，
右:20,，
底部：0
};
变量legendPanel={
宽度：0
};
var width=500-margins.left-margins.right-legendPanel.width；
变量高度=80-margins.top-margins.bottom
变量数据集=[{
数据：[{
值：“Value1”，
计数：3，
人物：“安娜、玛丽亚、彼得”，
}, {
值：“Value2”，
计数：3，
人物：“迈克尔，马丁，乔”，
}, {
值：“Value3”，
计数：2，
人物：“马丁，乔”，
}]
}, {
数据：[{
值：“Value1”，
计数：2，
人物：“路易斯，金”，
}, {
值：“Value2”，
计数：1，
人物：“理查德”，
}, {
值：“Value3”，
计数：4，
人物：“迈克尔、马丁、乔、玛丽亚”，
}]  
}
, {
数据：[{
值：“Value1”，
计数：1，
人物：“琳达”，
}, {
值：“Value2”，
计数：2，
人物：“本”，
}, {
值：“Value3”，
计数：0，
人：“，
}]  
}
];
dataset=dataset.map（函数（d）{
返回d.data.map（函数（o，i）{
返回{
人民：人民，
y:o.count，
x:o.value
};
});
});
var stack=d3.layout.stack（）；
堆栈（数据集）；
var dataset=dataset.map（函数（组）{
返回组.map（函数（d）{
返回{
人：d.人，
x:d.y，
y:d.x，
x0:d.y0
};
});
});
var numberOfPeople=6；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，width+margins.left+margins.right+legendPanel.width）
.attr（'height'，height+margins.top+margins.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margins.left+'，'+margins.top+'））；
var xMax=人数；
var xScale=d3.scale.linear（）
.domain（[0，xMax]）
.范围（[0，宽度]）；
变量值=数据集[0]。映射（函数（d）{
返回d.y；
});
var yScale=d3.scale.ordinal（）
.域（值）
.rangeRoundBands（[0，高度]，.2）；
var xAxis=d3.svg.axis（）
.scale（xScale）
.orient（'top'）
.tickFormat（函数（d）{return parseInt（d，10）}）
.滴答声（xMax）；
var yAxis=d3.svg.axis（）
.刻度（yScale）
.outerTickSize（0）
.东方（左）；
var colors=d3.scale.ordinal（）.range（[“#3E7EAB”、“#D89218”、“#EEEEEE”]）；
var groups=svg.selectAll（'g'）
.数据（数据集）
.输入（）
.append（'g'）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
});
var rects=groups.selectAll（'rect'）
.data（函数（d）{return d；}）
.输入（）
.append（'rect'）
.attr（'x'，函数（d）{return xScale（d.x0）；}）
.attr（'y'，函数（d，i）{return yScale（d.y）；}）
.attr（'height'，函数（d）{return yScale.rangeBand（）；}）
.attr（'width'，函数（d）{return xScale（d.x）；}）
.on（'mouseover'，函数（d）{
var xPos=parseFloat（d3.select（this.attr（'x'））/2+width/2；
var yPos=parseFloat（d3.select（this.attr（'y'））+yScale.rangeBand（）/2；
d3.选择（“#工具提示”）
.style（'left'，xPos+'px'）
.style（'top'，yPos+'px'）
.选择（“#值”）
//问题1：“如何在工具提示中显示人员姓名？？”
.文本（d.people）；
d3.选择（“#工具提示”）.classed（'hidden'，false）；
})
.on（'mouseout'，function（）{d3.select（'#tooltip'）.classed（'hidden'，true）；}）；
append（'g'）
.attr（'类'，'轴'）
.呼叫（yAxis）；
append（'g'）
.attr（'类'，'轴'）
.呼叫（xAxis）
.axis path、.axis line{
填充：无；
笔画：黑色；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：11px；
}
#工具提示{
位置：绝对位置；
文本对齐：左对齐；
高度：自动；
填充：10px；
背景#162F44；
指针事件：无；
}
#工具提示。隐藏{
显示：无；
}
#工具提示{
保证金：0；
字体系列：无衬线；
字体大小：11px；
颜色：白色；
线高：15px；
}



映射
数据集时，向其添加
人员
属性（并在第二个映射中执行相同操作）：

之后，您将在绑定数据中拥有
people
属性。因此，只需将
文本更改为：

.text(d.people);

以下是您的更新代码：


var setOfValues=[“Value4”、“Value5”、“Value6”]；
var保证金={
前30名，
左:100,，
右:20,，
底部：0
};
变量legendPanel={
宽度：0
};
var width=500-margins.left-margins.right-legendPanel.width；
变量高度=80-margins.top-margins.bottom
变量数据集=[{
数据：[{
值：“Value1”，
计数：3，
人物：“安娜、玛丽亚、彼得”，
}, {
值：“Value2”，
计数：3，
人物：“迈克尔，马丁，乔”，
}, {
值：“Value3”，
有限公司