Question

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;
            }); 
    }

Answer 1

我更新了部分代码块。你是正确的，没有找到.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;
        }); 
}

无法在条形图中绘制矩形

1 个答案: