Question

我正在尝试复制this url

中给出的d3 v4水平堆叠条形图示例

使用嵌套和汇总后，我的数据是：

[{"key":"Electronics and Hardware","value":{"total":1680,"Placed":544,"Not placed":1136}},{"key":"Media and Entertainment","value":{"total":120,"Placed":0,"Not placed":120}},{"key":"IT-ITeS","value":{"total":320,"Placed":0,"Not placed":320}},{"key":"Apparel","value":{"total":935,"Placed":380,"Not placed":555}},{"key":"Logistics","value":{"total":306,"Placed":96,"Not placed":210}},{"key":"Domestic Worker","value":{"total":120,"Placed":95,"Not placed":25}},{"key":"Healthcare","value":{"total":270,"Placed":124,"Not placed":146}},{"key":"Retail","value":{"total":359,"Placed":107,"Not placed":252}},{"key":"Iron and Steel","value":{"total":469,"Placed":193,"Not placed":276}},{"key":"Tourism & Hospitality","value":{"total":120,"Placed":94,"Not placed":26}},{"key":"Gems and Jewellery","value":{"total":30,"Placed":0,"Not placed":30}},{"key":"Life Sciences","value":{"total":180,"Placed":89,"Not placed":91}},{"key":"Beauty and Wellness","value":{"total":180,"Placed":136,"Not placed":44}},{"key":"BFSI","value":{"total":354,"Placed":258,"Not placed":96}},{"key":"Persons with Disability","value":{"total":74,"Placed":2,"Not placed":72}},{"key":"Automotive","value":{"total":120,"Placed":91,"Not placed":29}},{"key":"Telecom","value":{"total":248,"Placed":133,"Not placed":115}},{"key":"Construction","value":{"total":88,"Placed":18,"Not placed":70}}]

现在我的图表如下：

理想情况下，对于每个键（例如，电子和硬件），该栏应显示为已放置，而不是放置（堆叠）。现在这没有发生。

以下是绘制图表的代码

    function drawStackedBarChart(chartdata)
        {
            console.log("chart"+JSON.stringify(chartdata));
            var svg = d3.select("svg"),
                margin = {top: 20, right: 20, bottom: 30, 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 y = d3.scaleBand()          // x = d3.scaleBand()   
                .rangeRound([0, height])    // .rangeRound([0, width])
                .paddingInner(0.05)
                .align(0.1);

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

            var z = d3.scaleOrdinal()
                .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);


                var skeys = ["Placed","Not Placed"];

                chartdata.sort(function(a, b) { return b['value'].total - a['value'].total; });
                y.domain(chartdata.map(function(d) { return d.key; }));                 // x.domain...
                x.domain([0, d3.max(chartdata, function(d) { return d['value'].total; })]).nice();  // y.domain...
                z.domain(skeys);


                g.append("g")
                    .selectAll("g")
                    .data(d3.stack().keys(skeys)(chartdata.map(function(d) { return d['value']; })))
                    .enter().append("g")
                    .attr("fill", function(d) { return z(d.key); })
                    .selectAll("rect")
                    .data(function(d) { return d; })
                    .enter().append("rect")
                    .attr("y", function(d) { return y(d.data.key); })       //.attr("x", function(d) { return x(d.data.State); })
                    .attr("x", function(d) { return x(d[0]); })             //.attr("y", function(d) { return y(d[1]); })   
                    .attr("width", function(d) { return x(d[1]) - x(d[0]); })   //.attr("height", function(d) { return y(d[0]) - y(d[1]); })
                    .attr("height", y.bandwidth());                         //.attr("width", x.bandwidth());    

                g.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(0,0)")                        //  .attr("transform", "translate(0," + height + ")")
                    .call(d3.axisLeft(y));                                  //   .call(d3.axisBottom(x));

                g.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(0,"+height+")")               // New line
                    .call(d3.axisBottom(x).ticks(null, "s"))                    //  .call(d3.axisLeft(y).ticks(null, "s"))
                    .append("text")
                    .attr("y", 2)                                               //     .attr("y", 2)
                    .attr("x", x(x.ticks().pop()) + 0.5)                        //     .attr("y", y(y.ticks().pop()) + 0.5)
                    .attr("dy", "0.32em")                                       //     .attr("dy", "0.32em")
                    .attr("fill", "#000")
                    .attr("font-weight", "bold")
                    .attr("text-anchor", "start")
                    .text("Total")
                    .attr("transform", "translate("+ (-width) +",-10)");    // Newline

                var legend = g.append("g")
                    .attr("font-family", "sans-serif")
                    .attr("font-size", 10)
                    .attr("text-anchor", "end")
                    .selectAll("g")
                    .data(keys.slice().reverse())
                    .enter().append("g")
                    //.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
                    .attr("transform", function(d, i) { return "translate(-50," + (300 + 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; });


        }

我认为问题出在以下代码上：

.data(d3.stack().keys(skeys)(chartdata.map(function(d) { return d['value']; })))

我试图格式化图表数据，但是没有成功。

无法实施d3 v4水平堆叠条形图

0 个答案: