使用d3.nest绘制堆积的条形图

Question

好吧，我决定使用不同的数据结构对堆叠的条形图采取不同的方法。我改用d3.nest，并遵循以下示例：https://jsfiddle.net/ed8ow9hp/1/，因为数据数组与我的数据数组（具有多个相同医院但值不同的数组）相对应。这也是我可能可以更轻松地检索对象属性的地方。

堆积条形图的设计 * X轴：单个mtf（尽管值不同） * Y轴：性别计数（患者） * Z轴：显示性别的图例

**编辑：我能够绘制条形图，但是，每个条形图之间有小的白色间隙。

目标是生成如下所示的堆叠条形图（忽略工具提示）：

以下是其外观的输出：

这是我原始数据结构（一小部分）的样子：

 [{
    "hospitalName": "hospital1",
    "category": "Injury & Poisoning",        
    "Females": "0",
    "Males": "4",
    "Unknown": "0",
    "count": "4"
 },
 {
    "hospitalName": "hospital1",
    "category": "Symptoms, Signs, & Ill-Defined Conditions",
    "Females": "1",
    "Males": "1",
    "Unknown": "0",
    "count": "2"
},
{
   "hospitalName": "hospital2",
   "category": "Mental Disorders",
   "Females": "0",
   "Males": "1",
   "Unknown": "0",
   "count": "1"
}]

下面是我的JavaScript代码：

var svg = d3.select("svg"),
    margin = { top: 20, right: 20, bottom: 120, left: 40 },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.15)
    .align(0.1);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
    .range(["#a95e65", "#5eaaa2", "#6b486b"]);


d3.json("file.json", function(error, data) {

if (error) throw error;


var hospitals = d3.nest()
    .key(function(d) { return d.hospitalName })
    .entries(data);


hospitals.forEach(function(group) {
    var y0 = 0;
    group.values.forEach(function(entry, index) {
        entry.y0 = y0;
        entry.y1 = +entry.count + y0;
        y0 = entry.y1;
    });
    group.total = group.values[group.values.length - 1].y1;
});

    var columns = d3.keys(data[0]);

    var keys = columns.slice(3, 6)

    x.domain(d3.values(hospitals).map(function(d) { return d.key; }));
    y.domain([0, d3.max(hospitals, function(d) { return d.total; })]).nice();
    z.domain(keys);


    var tooltip = svg.append("g")
        .attr("class", "tooltip")
        .style("display", "none");

    var groups = g.append("g")
        .attr("class", "bars")
        .selectAll("g")
        .data(d3.stack().keys(keys)(hospitals))
        .enter().append("g")
        .attr("class", "g")
        .attr("transform", function(d) { return "translate(" + x(d.key) + ",0)"; });


       groups.selectAll("rect")
       .data(function(d) { return d.values; })
       .enter().append("rect")
       .attr("y", function(d) { return y(d.y1); })
       .attr("height", function(d) { return height - y(d.y1 - d.y0) - 1; }) // -1 for rect padding
       .attr("width", x.bandwidth())
       .attr("fill", function(d) { return z(d.key); })

       .on("mouseover", function(d) {
        d3.select(this).transition()
            .style("opacity", 1)
        tooltip.transition()
            .duration(200)
            .style("opacity", 1);
        tooltip.html("Count: " + d.count + "<br/>" + "Percent: " +
                Math.round())
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
    })
       .on("mousemove", function(d) {
        tooltip
            .style("left", (d3.event.pageX - 120) + "px")
            .style("top", (d3.event.pageY - 80) + "px")
            .style("opacity", 1);
    })
    .on("mouseout", function(d) {
        d3.select(this).transition()
            .style("opacity", 0.8);
        tooltip.transition()
            .duration(500)
            .style("opacity", 0);
    });

// Add the x-axis
g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("x", -11)
    .attr("y", 7)
    .attr("dy", ".35em")
    .attr("transform", "rotate(290)")
    .style("text-anchor", "end");


g.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(y).ticks(null, "s"))
    //.call(d3.axisLeft(y).tickFormat(d => Math.round(d * 100 / d3.max(data, function(d) { return d.count })) + "%"))
    .append("text")
    .attr("x", 2)
    .attr("y", y(y.ticks().pop()) + 0.5)
    .attr("dy", "0.32em")
    .attr("fill", "#000")
    .attr("font-family", "Montserrat, sans-serif")
    .attr("font-size", "13px")
    .attr("text-anchor", "start")
    .text("Population");


var legend = g.append("g")
    .attr("class", "legend")
    .attr("text-anchor", "end")
    .selectAll("g")
    .data(gender)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
    .attr("x", width - 19)
    .attr("width", 19)
    .attr("height", 19)
    .attr("fill", z);

legend.append("text")
    .attr("x", width - 24)
    .attr("y", 9.5)
    .attr("dy", "0.32em")
    .text(function(d) { return d; });






   });