如何在水平堆叠条形图中显示条形值

var group = ["field2", "field3"];
var mainDiv = "#charts";
var mainDivName = "charts";
var axisBottom;
var axisLeft;
var dealsData = [{
        field1: "company-1",
        field2: 500.0,
        field3: 400.0,
    },
    {
        field1: "company-2",
        field2: 200.0,
        field3: 700.0,
    },
    {
        field1: "company-3",
        field2: 113.2,
        field3: 850.0,
    },
    {
        field1: "company-4",
        field2: 140.4,
        field3: 83.0,
    },
    {
        field1: "company-5",
        field2: 75.5,
        field3: 27.5,
    },
    {
        field1: "company-6",
        field2: 140.0,
        field3: 440.0,
    },
    {
        field1: "company-6",
        field2: 79.5,
        field3: 107.5,
    },
];

var layers = d3.stack().keys(group).offset(d3.stackOffsetDiverging)(
    dealsData
);

var svg = d3.select("svg"),
    margin = {
        top: 20,
        right: 30,
        bottom: 50,
        left: 80,
    },
    width = +svg.attr("width"),
    height = +svg.attr("height");

var x = d3.scaleLinear().rangeRound([margin.left, width - margin.right]);

x.domain([d3.min(layers, stackMin), d3.max(layers, stackMax)]);

var y = d3
    .scaleBand()
    .rangeRound([height - margin.bottom, margin.top])
    .padding(0.5);

y.domain(
    dealsData.map(function(d) {
        return d.field1;
    })
);

function stackMin(layers) {
    return d3.min(layers, function(d) {
        return d[0];
    });
}

function stackMax(layers) {
    return d3.max(layers, function(d) {
        return d[1];
    });
}
this.axisBottom = d3.axisBottom(x).tickSize(-430);

var colors = ["#00FF00", "#FF0000"];
var eleX = svg
    .append("g")
    .attr("transform", "translate(0," + (height - margin.bottom) + ")")
    .call(this.axisBottom);

eleX
    .append("text")
    .attr("x", width / 2)
    .attr("y", margin.bottom * 1)
    .attr("dx", "0.32em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("text-anchor", "start")
    .text(" x- axis");
eleX
    .selectAll("line")
    .style("stroke-width", "0.6")
    .style("opacity", "0.25")
    .style("stroke", "#adadad");
eleX
    .selectAll("path")
    .style("stroke-width", "1")
    .style("opacity", "0")
    .style("stroke", "#adadad");

var bw = y.bandwidth;
console.log('bw', bw);
console.log("bandwidth::", bw);
var ele = svg
    .append("g")
    .attr("transform", "translate(" + margin.left + ",0)")
    .call(d3.axisLeft(y));
ele
    .selectAll("text")
    .attr("text-anchor", "start")
    .attr("dx", "15px")
    .attr("dy", y.bandwidth)
    .style("font", "Source Sans Pro Regular")
    .style("fill", "#6C6F78");
ele
    .selectAll("rect")
    .attr("text-anchor", "start")
    .attr("dx", "288px")
    .attr("dy", "-15px");
ele
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("x", 0 - height / 2)
    .attr("y", 60 - margin.left)
    .attr("dy", "0.32em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("text-anchor", "middle")
    .text(" y-axis");
ele.selectAll("line").style("stroke-width", "1").style("opacity", "1");
//.style('stroke-dasharray', '2,2');
ele.selectAll("path").attr("opacity", "0");

var maing = svg.append("g").selectAll("g").data(layers);
var g = maing
    .enter()
    .append("g")
    .attr("fill", function(d, i) {
        return colors[i];
    });

var bars = g
    .selectAll("rect")
    .data(function(d) {
        d.forEach(function(d1) {
            d1.key = d.key;
            return d1;
        });
        return d;
    })
    .enter()
    .append("rect")
    .attr("data", function(d) {
        var data = {};
        data["key"] = d.key;
        data["value"] = d.data[d.key];
        data["name"] = d.data.field1;
        var total = 0;
        group.map(function(d1) {
            total = total + d.data[d1];
        });
        data["total"] = total;
        console.log("tooltip", data);
        return JSON.stringify(data);
    })
    .attr("width", function(d) {
        return x(d[1]) - x(d[0]);
    })
    .attr("x", function(d) {
        return x(d[0]);
    })
    .attr("y", function(d) {
        return y(d.data.field1);
    })
    .attr("height", y.bandwidth)
    .attr("rx", 2)
    .attr("ry", 2);

svg.append("g")
  .attr("class", "labels")
  .selectAll("text")
  .data(layers[layers.length - 1]) // this has all the information we need
  .enter()
  .append("text")
  .attr("x", function(d) {
      return x(d[1]) + 10;
  })
  .attr("y", function(d) {
      return y(d.data.field1) + y.bandwidth() / 2;
  })
  .attr("dominant-baseline", "central")
  .text(function(d) {
    return d.data.field1 + " / " + d.data.field2;
  });

<div id="charts">
  <svg width="710" height="500"></svg>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3- 
tip.min.js"></script>