Question

我正在尝试复制bl.ocks.org上找到的此代码，但我无法使用条形图进行渲染。我是从csv而不是tsv中抽出来的，但我认为这不会产生影响。没有任何错误写入控制台。我哪里错了？

<script type="text/javascript">
    $( document ).ready(function() {                        
        loadChart();
    });

    function loadChart() {
        var svg = d3.select("svg");
        var 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;

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

        var g = svg.append(g).attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        d3.csv("Data/data.csv", function(d) {
            d.NumProducts = +d.NumProducts;
            return d;
        }, function(error, data) {
            if (error) throw error;

            x.domain(data.map(function(d) { return d.Category; }));
            y.domain([0, d3.max(data, function(d) { return d.NumProducts; })]);

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

            g.append("g")
                .attr("class", "axis axis--y")
                    .call(d3.axisLeft(y).ticks(10))
                .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("Dy", "0.71em")
                    .attr("text-anchor", "end")
                    .text("Number of Products");

            g.selectAll(".bar")
                .data(data)
                .enter().append("rect")
                    .attr("class" , "bar")
                    .attr("x", function(d) { return x(d.Category); })
                    .attr("y", function(d) { return y(d.NumProducts); })
                    .attr("width", x.bandwidth())
                    .attr("height", function(d) { return height - y(d.NumProducts); });
        });
    }
</script>

csv：

Category,NumProducts
Beverages,12
Condiments,12
Confections,13
Dairy Products,10
Grains/Cereals,7
Meat/Poultry,6
Produce,5
Seafood,12

Answer 1

你遇到的主要问题是缺少语音标记。

 var g = svg.append(g)

应阅读：

 var g = svg.append("g")

如果你要检查你的DOM，你会看到

<svg>
    <undefined transform="translate(40,20)">
    ... (correct DOM)
    </undefined>
</svg>

在此之后没有任何渲染的原因是因为浏览器不知道如何渲染<undefined>元素，因此它停止尝试渲染。

这立即表明其中一个append调用无法正常工作，因为DOM并不了解给定的元素类型。做出改变产生了这个：

条形图不呈现

1 个答案: