javascript - D3 错误地处理堆积条形图

Question

我有一个名为 dummydata_genreCountByYear.csv 的 CSV 文件。它看起来像这样:

Year,Unknown,show tunes,jazz,rock,heavy metal,rap,r&b,trap,hip hop
1950,1,2,5,,,,,,
1990,,,,2,2,2,,,
2016,,,,,,,5,1,3

我想制作一个标准化的堆积条形图，显示每年流派的受欢迎程度。我主要关注this example标准化堆积条形图。

这是我的index.html:

<div id="genre-by-year-chart-container" class="chart">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js" charset="utf-8"></script>
<script type="text/javascript">
    var x, y, xAxis, yAxis;

    var genreByYearContainerID= "genre-by-year-chart-container";
    var margin= {
        top: 50,
        right: 30,
        bottom: 100,
        left: 0
    };
    var marginTop=      margin.top;
    var marginLeft=     margin.left;
    var marginBottom=   margin.bottom;
    var marginRight=    margin.right;

    var width=  document.getElementById(genreByYearContainerID).clientWidth - marginRight - marginLeft;

    var widthWithMargins=   width+marginRight+marginLeft;
    var height=             1000;

    var chart=      d3.select('#'+genreByYearContainerID)
                    .append("svg");
    chart.attr('width',widthWithMargins);
    chart.append('g')
        .attr("transform","translate("+marginLeft+','+marginTop+')');

    var color=  d3.scale.category20();
    d3.csv("dummydata_genreCountByYear.csv", function(error, data){
        x=  d3.scale
            .ordinal()
            .rangeRoundBands([0,width], 0.1);

        y=  d3.scale
            .linear()
            .rangeRound([height,0]);

        xAxis=  d3.svg.axis()
                .scale(x)
                .orient("bottom");

        yAxis=  d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickFormat(d3.format(".0%"));

        color.domain(d3.keys(data[0])
            .filter(function(key){
                return key !== "Year";
            }
        ));

        data.forEach(function(d){
            var y0= 0;
            d.Genres=   color.domain().map(function(name){
                var obj=    {
                    name:   name,
                    y0:     y0,
                    y1:     y0 += +d[name]
                };
                return obj;
            });

            d.Genres.forEach(function(d){
                d.y0 /= y0;
                d.y1 /= y0;
            });
        });

        data.sort(function(a,b){
            return b.Genres[0].y1 + a.Genres[0].y1;
        });

        x.domain(data.map(function(d){
            return d.Year;
        }));

        chart.append('g')
            .attr("class","x axis")
            .attr("transform","translate(0,"+height+')')
            .call(xAxis);

        chart.append('g')
            .attr("class","y axis")
            .call(yAxis);

        var year=   chart.selectAll(".year")
                    .data(data)
                    .enter()
                    .append('g')
                    .attr("class","year")
                    .attr("transform",function(d){
                        return "translate(" + x(d.Year) + ",0)";
                    });

        year.selectAll("rect")
            .data(function(d){
                return d.Genres;
            })
            .enter()
            .append("rect")
            .attr("width",x.rangeBand())
            .attr('y',function(d){
                return y(d.y1);
            })
            .attr("height",function(d){
                return y(d.y0) - y(d.y1);
            })
            .style("fill",function(d){
                return color(d.name);
            });
    });
</script>

但是当我打开文件时，我看到的是:

当我在浏览器中检查 DOM 元素中的每个 .year 元素时，以下是我所看到的示例:

<g class="year" transform="translate(30,0)">
  <rect width="261" y="1000" height="0" style="fill: rgb(31, 119, 180);">
  <rect width="261" y="1000" height="0" style="fill: rgb(174, 199, 232);">
  <rect width="261" y="1000" height="0" style="fill: rgb(255, 127, 14);">
  <rect width="261" y="667" height="333" style="fill: rgb(255, 187, 120);">
  <rect width="261" y="333" height="334" style="fill: rgb(44, 160, 44);">
  <rect width="261" y="0" height="333" style="fill: rgb(152, 223, 138);">
  <rect width="261" y="0" height="0" style="fill: rgb(214, 39, 40);">
  <rect width="261" y="0" height="0" style="fill: rgb(255, 152, 150);">
  <rect width="261" y="0" height="0" style="fill: rgb(148, 103, 189);">
</g>

以上 HTML 适用于最左侧的 .year 元素。 rect 元素似乎具有正确的 y、height 和 style 属性。那么为什么这段代码不能正确显示标准化的堆积条形图呢？

Answer 1

您必须为 svg 定义一个高度。

类似(或您所在区域所需的任何高度):

chart.attr('高度', 1000);