Question

我根据.csv文件中的数据制作了条形图。我正在努力制作条形图的高度。我希望从特定列的数据值中获取高度，在这种情况下，＆＃34; NO OF RECORDS STOLEN＆＃34;文件中的列。

我尝试过这样的事情：

.attr("height", function(d) {return d["NO OF RECORDS STOLEN"];}

但它不起作用。

这是我的HTML：

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>Bar Chart | Crime File</title>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <script type="text/javascript">
        var dataset = "data_breaches.csv";

        var w = 960;
        var h = 500;
        var barPadding = 1;
        var barWidth = w / dataset.length - barPadding;

        // create canvas
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        // create bar chart
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", function (d, i) {
                return i * (barWidth + barPadding);
            })
            .attr("y", 0)
            .attr("width", barWidth)
            .attr("height", 100) // WORKING ON THIS
            .attr("fill", function (d) {
                return "rgb(200, 50, 50)";
            });


        // get data
        d3.csv(dataset, function (data) {

            // convert type from string to integer
            data.forEach(function typeConv(d) {
                // type conversion from string to number
                d["YEAR"] = +d["YEAR"]; // for names with spaces
                d["DATA SENSITIVITY"] = +d["DATA SENSITIVITY"];
                d["NO OF RECORDS STOLEN"] = +d["NO OF RECORDS STOLEN"];
                return d;
            });

            var arrayLength = data.length;

            // fixed, should have been <, not <= bc n-1, not n
            for (var i = 0; i < arrayLength; i++) {
                var breachesData = data[i];
                console.log(breachesData);
            }
        });
    </script>
</body>

</html>

Answer 1

正如您在问题的评论中所提到的，您需要在数据加载后附加矩形。我还审查了您的代码并删除了不必要的部分以便清楚。请注意我添加的评论，如果您有任何疑问，请告诉我们。祝你好运！

var dataset = "data_breaches.csv"; var w = 960; var h = 500; var barPadding = 1; var barWidth = w / dataset.length - barPadding; // create canvas var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // get data d3.csv(dataset, function (data) { // You need to create a "scale" to convert from your data values to pixels in the screen var heightBy = "NO OF RECORDS STOLEN" var scale = d3.scaleLinear() .domain([0, d3.max(d => d[heightBy])]) .range([0, h]) // create bar chart svg.selectAll("rect") .data(data) // "dataset" is the filepath, "data" is the loaded file content .enter() .append("rect") .attr("x", (d, i) => i * (barWidth + barPadding)) .attr("y", d => h - scale(d[heightBy])) // Remember that on SVG y=0 is at the bottom and the rect height grows down .attr("width", barWidth) .attr("height", d => scale(d[heightBy])) .attr("fill", "rgb(200, 50, 50)"); });

如何使条形图的高度成为数据？

1 个答案: