y軸の2つのラベルは一度に表示されません

Question

私はd3jsで新しく、同じノードに2つのラベルを表示したいと思います。しかし、両方のラベルがグラフのノードに表示されていません。ラベルは2つあります：1つはd.name、もう1つはd.main.tempです。両方を表示したいです。ここで

は私のコードです：

var sortOrder = false; 
var sortBars = function() { 
    sortOrder = !sortOrder; 

    sortItems = function (a, b) { 
     if (sortOrder) { 
      return a.main.temp - b.main.temp; 
     } 
     return b.main.temp - a.main.temp; 
    }; 

    svg.selectAll("rect") 
    .sort(sortItems) 
    .transition() 
    .delay(function (d, i) { 
     return i * 50; 
    }) 
    .duration(1000) 
    .attr("x", function (d, i) { 
     return xScale(i); 
    }); 

    //naming the label(temperature value) 
    var m = svg.selectAll('text') 
    .sort(sortItems) 
    .transition(); 

    m.delay(function (d, i) { 
     return i * 50; 
    }) 
    .duration(1000) 
    .text(function (d) { 
     console.log(d.main.temp); 
     return d.main.pressure; 
    }) 
    .attr("text-anchor", "middle") 
    .attr("x", function (d, i) {console.log(d.main.pressure); 
     return xScale(i) + xScale.rangeBand()/2; 
    }) 
    .attr("y", function (d) {console.log(d.main.pressure); 
     return h - yScale(d.main.temp) + 14; 
    }); 

    m.delay(function (d, i) { 
     return i * 50; 
    }) 
    .duration(1000); 

    m.text(function (d) { 
     //console.log(d.name); 
     // console.log(d.main.temp); 
     return d.name; 
    }) 
    .attr("text-anchor", "middle") 
    .attr("x", function (d, i) { 
     return xScale(i) + xScale.rangeBand()/2; 
    }) 
    .attr("y", function (d) { 
     return h - yScale(d.name) + 14; 
    }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "orange"); 

// Add the onclick callback to the button 
d3.select("#sort").on("click", sortBars); 

Answer 1

の代わりに `Dを返す場合は代わりの

return d.name; 

使用

return d.name + ' ' + d.main.temp 

これはあなたのラベル