无法在条形图中绘制矩形答案

【问题标题】：Can't draw rectangular in a barchart无法在条形图中绘制矩形
【发布时间】：2018-02-20 11:21:34
【问题描述】：

d3js 中的以下代码应该绘制条形图。它绘制轴并向它们添加标签。但它不会绘制条形图。我的猜测是它找不到 svg.selectAll(".bar") 但我不知道应该如何修复它。附言我正在关注本教程：https://github.com/colorfest/d3js/blob/master/js/bargraph/bargraph.js

function drawBarchart(geography){
    var x_labels = ["Very Good", "Good", "Fair", "Poor", "Mentioned", "Not Mentioned"];
    var margin  = {top: 20, right: 20, bottom: 100, left: 60},
        width   = 800 - margin.left - margin.right,
        height  = 500 - margin.top - margin.bottom,
        x       = d3.scale.ordinal().rangeRoundBands([0,width], 0.5),
        y       = d3.scale.linear().range([height,0]);
    var xAxis   = d3.svg.axis()
        .scale(x)
        .orient("bottom");
    var yAxis   = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5) 
    var svg     = d3.select("#barchart")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    d3.json("data.json", function (data)
    {
        x.domain(x_labels.map(function (l)
        {
            return l;
        }));
        y.domain([0,300]);
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0, " + height + ")")
            .call(xAxis)
            .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "-0.5em")
            .attr("dy", "-.55em")
            .attr("y", 30)
            .attr("transform", "rotate(-45)" );
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 5)
            .attr("dy", "0.8em")
            .attr("text-anchor", "end")
            .text("Score");
        svg.selectAll(".bar")
            .data(data[6][geography.id])
            .enter()
            .append("rect")
            .style("fill", "orange")
            .attr("x", function(d)
            {
                return x(d.name);
            })
            .attr("width", x.rangeBand())
            .attr("y", function (d)
            {
                return y(d["Health"][0]);
            })
            .attr("height", function (d)
            {
                return height;
            }); 
    }

【问题讨论】：

也请上传data.json文件。

标签： javascript d3.js

【解决方案1】：

我更新了你的部分代码块。你没有找到 .bar 是正确的，因为 rects 没有被赋予 bar 类。

svg.selectAll(".bar")
        .data(data[6][geography.id])
        .enter()
        .append("rect")
        .attr("class", "bar")
        .style("fill", "orange")
        .attr("x", function(d)
        {
            return x(d.name);
        })
        .attr("width", x.rangeBand())
        .attr("y", function (d)
        {
            return y(d["Health"][0]);
        })
        .attr("height", function (d)
        {
            return height;
        }); 
}

【讨论】：