Question

我正在遵循“让'制作一些图表'的第三部分教程作为D3的介绍。本教程的一部分要求通过TSV插入数据。鉴于我不认为这是我最终的用例，我试图使用简单的javascript数组使用下面的代码修改教程。但是，当我在浏览器中渲染时，页面上没有任何内容显示。任何人都可以对此有所了解吗？

以下是教程链接，可以参考原始代码：http://bost.ocks.org/mike/bar/3/

我的JS代码：

        <script>
        var data = [4,8,15,16,23,42,57,89,100,160];

        var width = 960,
            height = 500; // have to make sure variables are case sensitive

        var y = d3.scale.linear()
            .domain([0, d3.max(data)]) // scaling based on max value
            .range([height, 0]);

        var chart = d3.select(".chart")
            .attr("width", width)
            .attr("height", height);

        var barWidth = width / data.length;

        var bar = chart.selectAll("g")
                    .data(data)
                .enter().append("g")
                    .attr("transform", function(d,i) { return "translate(" + i * barWidth + ",0)";});

        bar.append("rect")
            .attr("y", function(d) { return y(d.value); })
            .attr("width", barWidth - 1)
            .attr("height", function(d) { return height - y(d.value); });   

        bar.append("text")
            .attr("x", barWidth / 2)
            .attr("y", function(d) { return y(d.value) + 3; })
            .attr("dy", ".75em")
            .text(function(d) { return d.value; });

        function type(d) {
            d.value = +d.value;
            return d;
        }
        </script>

Answer 1

您复制的代码引用了一个命名属性value来确定要绘制的内容。您创建的数据并不具备此功能，而只是数据。因此，无论您拥有d.value，只需引用d。

完整演示here。

Answer 2

您的问题源于您使用Array数字作为数据的事实，而在Mike Bostock的示例中，他使用了Array Object s（例如），var data = [{value: 30}, ...]）。因此，您需要在代码中更改d.value到d的所有情况，因为您的数据不再是Object而只是一个数字。

bar.append("rect")
    .attr("y", function(d) { return y(d); }) // <---- delete .value
    .attr("width", barWidth - 1)
    .attr("height", function(d) { return height - y(d); }); // <---- delete .value

bar.append("text")
    .attr("x", barWidth / 2)
    .attr("y", function(d) { return y(d) + 3; }) // <---- delete .value
    .attr("dy", ".75em")
    .text(function(d) { return d; }); // <---- delete .value

进行这些更改会生成以下条形图：

bar chart

D3 Javascript / SVG第三部分ISsue

2 个答案: