d3.js在Y轴上从数据集中附加两个标签

水平条形图的数据是如下所示的对象数组： {值：-10，数据集：“克尔维特”，年份：“1975”}。“数据集”标签位于y轴上。我想将“年”标签附加到“数据集”标签上，因此y轴上的标签如下所示：

克尔维特1975

到目前为止，我可以向Y轴添加一个或另一个，但不能同时添加两个。以下是我的代码：

var margin = {top: 30, right: 10, bottom: 50, left: 50},
width = 500,
height = 300;

var data = [{value: -10, dataset:"Corvette", year: "1975"},
{value: 40, dataset:"Lumina", year: "1975"},
{value: -10, dataset:"Gran Torino", year: "1971"},
{value: -50, dataset:"Pomtiac GTO", year: "1964"},
{value: 30, dataset:"Mustang", year: "19655"},
{value: -20, dataset:"Camaro", year: "1973"},
{value: -70, dataset:"Firebird", year: "1975"}];

// Add svg to
var svg = d3.select('body').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 + ')');



// set the ranges
var y = d3.scaleBand()
.range([height, 0])
.padding(0.1);

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

// Scale the range of the data in the domains
x.domain(d3.extent(data, function (d) {
    return d.value;
}));
y.domain(data.map(function (d) {
    return d.dataset;
}));

// append the rectangles for the bar chart
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", function (d) {
    return "bar bar--" + (d.value < 0 ? "negative" : "positive");
})
.attr("x", function (d) {
    return x(Math.min(0, d.value));
})
.attr("y", function (d) {
    return y(d.dataset);
})
.attr("width", function (d) {
    return Math.abs(x(d.value) - x(0));
})
.attr("height", y.bandwidth());

// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

// add the y Axis
 let yAxisGroup = svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + x(0) + ",0)")
.call(d3.axisRight(y));
yAxisGroup.selectAll('.tick')
.data(data)
.select('text')
.attr('x', function(d,i){return d.value<0?9:-9})
.style('text-anchor', function(d,i){return d.value<0?'start':'end'})

var margin={top:30，right:10，bottom:50，left:50}，
宽度=500，
高度=300；
var数据=[{value:-10，数据集：“Corvette”，年份：“1975”}，
{值：40，数据集：“Lumina”，年份：“1975”}，
{值：-10，数据集：“格兰都灵”，年份：“1971”}，
{值：-50，数据集：“Pomtiac GTO”，年份：“1964”}，
{值：30，数据集：“野马”，年份：“19655”}，
{值：-20，数据集：“Camaro”，年份：“1973”}，
{值：-70，数据集：“火鸟”，年份：“1975”}；
//将svg添加到
var svg=d3.select（'body'）。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+'）））；
//设定范围
变量y=d3.scaleBand（）
.范围（[高度，0]）
.填充（0.1）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
//缩放域中数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回d值；
}));
y、 域（data.map）（函数（d）{
返回d.dataset；
}));
//为条形图添加矩形
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”，函数（d）{
返回“条-条-”+（d.值<0？“负”：“正”）；
})
.attr（“x”，函数（d）{
返回x（数学最小值（0，d值））；
})
.attr（“y”，函数（d）{
返回y（d.dataset）；
})
.attr（“宽度”，函数（d）{
返回数学值abs（x（d.value）-x（0））；
})
.attr（“高度”，y.带宽（））；
//添加x轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加y轴
让yAxisGroup=svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“平移”（+x（0）+”，0）
.call（d3.axisRight（y））；
yAxisGroup.selectAll（“.tick”）
.数据（数据）
.选择（'文本'）
.attr（'x'，函数（d，i）{返回d.value您可以将d.dataset和d.year的连接字符串映射到y刻度，然后在使用该y刻度定位矩形时使用相同的连接字符串

然后y轴将使用该连接字符串

示例：

//create a reusable function to concatenate the values you want to use
function yValue(d) { return d.dataset + " " + d.year }

// Scale the range of the data in the domains
x.domain(d3.extent(data, function (d) {
    return d.value;
}));
y.domain(data.map(function(d){ return yValue(d) }));

// append the rectangles for the bar chart
svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", function (d) {
        return "bar bar--" + (d.value < 0 ? "negative" : "positive");
    })
    .attr("x", function (d) {
        return x(Math.min(0, d.value));
    })
    .attr("y", function (d) {
        return y(yValue(d));
    })
    .attr("width", function (d) {
        return Math.abs(x(d.value) - x(0));
    })
    .attr("height", y.bandwidth());


相关代码：

//create a reusable function to concatenate the values you want to use
function yValue(d) { return d.dataset + " " + d.year }

// Scale the range of the data in the domains
x.domain(d3.extent(data, function (d) {
    return d.value;
}));
y.domain(data.map(function(d){ return yValue(d) }));

// append the rectangles for the bar chart
svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", function (d) {
        return "bar bar--" + (d.value < 0 ? "negative" : "positive");
    })
    .attr("x", function (d) {
        return x(Math.min(0, d.value));
    })
    .attr("y", function (d) {
        return y(yValue(d));
    })
    .attr("width", function (d) {
        return Math.abs(x(d.value) - x(0));
    })
    .attr("height", y.bandwidth());

//创建一个可重用函数来连接要使用的值
函数yValue（d）{返回d.dataset+“”+d.year}
//缩放域中数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回d值；
}));
y、 域（data.map（函数（d）{returnyvalue（d）}））；
//为条形图添加矩形
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”，函数（d）{
返回“条-条-”+（d.值<0？“负”：“正”）；
})
.attr（“x”，函数（d）{
返回x（数学最小值（0，d值））；
})
.attr（“y”，函数（d）{
返回y（y值（d））；
})
.attr（“宽度”，函数（d）{
返回数学值abs（x（d.value）-x（0））；
})
.attr（“高度”，y.带宽（））；
如果您（出于任何原因）希望保留相同的域，请使用
tickFormat
获取年份：

.call(d3.axisRight(y)
    .tickFormat(function(d) {
        //filter the data array according to 'd', which is 'dataset'
        var filtered = data.filter(function(e) {
            return e.dataset === d;
        })[0];

        //get the year in the 'filtered' object using 'filtered.year'
        return d + " " + filtered.year
    })
);

以下是更改后的代码：


var保证金={
前30名，
右:10,，
底数：50，
左：50
},
宽度=500，
高度=300；
风险值数据=[{
值：-10，
数据集：“克尔维特”，
年份：“1975年”
}, {
价值：40，
数据集：“Lumina”，
年份：“1975年”
}, {
值：-10，
数据集：“格兰都灵”，
年份：“1971年”
}, {
值：-50，
数据集：“Pomtiac GTO”，
年份：“1964年”
}, {
数值：30，
数据集：“野马”，
年份：“19655”
}, {
值：-20，
数据集：“Camaro”，
年份：“1973年”
}, {
值：-70，
数据集：“火鸟”，
年份：“1975年”
}];
//将svg添加到
var svg=d3.select（'body'）。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+'）））；
//设定范围
变量y=d3.scaleBand（）
.范围（[高度，0]）
.填充（0.1）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
//缩放域中数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回d值；
}));
y、 域（data.map）（函数（d）{
返回d.dataset；
}));
//为条形图添加矩形
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”，函数（d）{
返回“条-条-”+（d.值<0？“负”：“正”）；
})
.attr（“x”，函数（d）{
返回x（数学最小值（0，d值））；
})
.attr（“y”，函数（d）{
返回y（d.dataset）；
})
.attr（“宽度”，函数（d）{
返回数学值abs（x（d.value）-x（0））；
})
.attr（“高度”，y.带宽（））；
//添加x轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加y轴
让yAxisGroup=svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“平移”（+x（0）+”，0）
.call（d3.axisRight（y）
.d格式（函数（d）{
var filtered=data.filter（函数（e）{
返回e.dataset==d；
})[0];
返回d+“”+1.1年
})
);
yAxisGroup.selectAll（“.tick”）
.数据（数据）
.选择（'文本'）
.attr（'x'，函数（d，i）{
返回d.值<0？9:-9
})
.style（'text-anchor'，函数（d，i）{
返回d.value<0？'start'：'end'
})
.bar——正{
填充：钢蓝；
}
.bar--负数{
填充物：达克朗；
}

建议也不错。