不可能將 a 附加text到rect元素上，它們不應(yīng)該有子元素。您可以只繪制另一個(gè)g節(jié)點(diǎn)，并使用最后一組條形圖中的數(shù)據(jù)。數(shù)據(jù)包含您需要的一切 - 他們知道最高柱的值，因此他們知道偏移量，并且他們的屬性x中也有數(shù)據(jù)：d.data
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>
請(qǐng)注意，存在一些問(wèn)題，即條形被繪制在錯(cuò)誤的位置或看起來(lái)被繪制了兩次。這是您的圖表中預(yù)先存在的問(wèn)題，現(xiàn)在更加清晰，因?yàn)檫@意味著還繪制了額外的標(biāo)簽。
