堆积面积图中的填充被反转 d3

Question

我不知道为什么我的堆积面积图的填充会反转。我以某种方式能够从网站上复制它并创建一支笔。有相当多的数据（对此感到抱歉）。请检查此 pen link。帮助表示赞赏。下面是我的代码片段：

                function plotStackedArea(data) {

                    clearChart();
                    appendResponsiveSvg();
                    checkLength(sgChartData);

                // getting min and max values to pass in domain
                var minX = d3.min(data, function (kv) {
                    return d3.min(kv.values, function (d) {
                        return d.x;
                    }) });
                var maxX = d3.max(data, function (kv) {
                    return d3.max(kv.values, function (d) {
                        return d.x;
                    }) });
                var minY = d3.min(data, function (kv) {
                    return d3.min(kv.values, function (d) {
                        return d.y;
                    }) });
                var maxY = d3.max(data, function (kv) {
                    return d3.max(kv.values, function (d) {
                        return d.y;
                    }) });

                // we exclude x axis label from here
                var getKeysArr = d3.keys(stackedDataToPlot[0]).filter(function(key) { return key !== xaxisData[0].columnID; });

                // Color range - add your favorites here
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);


                function xAxisScale() {

                    if ((xaxisData[0].hasOwnProperty("dataType")) && (xaxisData[0].dataType === "String")) {
                        // this is for ordinal data
                        var ordinal = d3.scale.ordinal().rangePoints([MARGINS.left, WIDTH - MARGINS.right], 0).domain(sgChartData.map(function(d) {
                            return d.x;
                        }));
                        return ordinal;
                    } else {
                        // this is for numbers
                        var linear = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([minX, maxX]);
                        return linear;
                    }
                }


                var xScale = xAxisScale(),

                      yScale = d3.scale.linear()
                      .range([HEIGHT - MARGINS.top, MARGINS.bottom])
                      .domain([0, maxY]),

                      xAxis = d3.svg.axis()
                      .scale(xScale)
                      .tickValues(_arr.map(function(d) {
                            return d.x;
                        })),

                      yAxis = d3.svg.axis()
                      .scale(yScale);

                    yAxis = d3.svg.axis()
                      .scale(yScale)
                      .orient("left");

                    // for stacked area
                    d3.layout.stack(data);

                    var area = d3.svg.area()
                      .x(function(d) {
                        return xScale(d.x);
                      })
                      .y0(function(d) {
                        return yScale(HEIGHT - MARGINS.top, MARGINS.bottom);
                      })
                      .y1(function(d) {
                        return yScale(d.y);
                      })
                      .interpolate("cardinal");

                    data.forEach(function(d, i) {
                      svg.append('svg:path')
                        .attr('d', area(d.values))
                        .attr('id', 'line_' + d.key)
                        .attr('fill', function(d, j) {
                          return color(i);
                        });
                    });

                    svg.append("svg:g")
                      .attr("class", "axis")
                      .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                      .call(xAxis);

                    svg.append("svg:g")
                      .attr("class", "axis")
                      .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                      .call(yAxis);

                   var legend = svg.selectAll(".legend")
                      .data(getKeysArr.slice().reverse())
                    .enter().append("g")
                      .attr("class", "legend")
                      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

                    legend.append("rect")
                          .attr("x", WIDTH - 18)
                          .attr("width", 18)
                          .attr("height", 18)
                          .style("fill", function(d, j) {
                          return color(j);
                        });

                      legend.append("text")
                          .attr("x", WIDTH - 24)
                          .attr("y", 9)
                          .attr("dy", ".35em")
                          .style("text-anchor", "end")
                          .text(function(d) { return d; });
                }
                plotStackedArea(multiLineData);

Pen link 解决方案：Stacked area d3

Answer 1

您不需要缩放初始 y0 值。您希望它们与您的 x 轴定位的 y 值相匹配（假定您希望图表底部位于 x 轴上）：

.y0(function(d) {
  return HEIGHT - MARGINS.bottom;
})

堆积面积图中的填充被反转 d3

The fill in stacked area chart gets reversed d3

javascript

stacked-area-chart

d3.js

angularjs