Question

最近我开始探索D3并且我有一些尺度问题。

我处于简单条形图的早期阶段，我的yScale输出了一些奇怪的值。

我注意到，如果我简单地定义像.domain([0, 8000])这样不太动态的域名，就不会发生这种情况......

以下是csv文件的链接：

Google Transparency Report: User data requests

这是代码：

    var dataset;

    var w = 500;
    var h = 300;

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

    d3.csv("google-user-data-requests.csv", function(data) {
        dataset = data;
        generateVis();
    });

    var generateVis = function () {

        var barValue = function(d) {
            return d["User Data Requests"];
        };

        var xScale = d3.scale.ordinal()
            .domain(d3.range(dataset.length))
            .rangeRoundBands([0, w], 0.05);

        var yScale = d3.scale.linear()
            .domain([0, d3.max(dataset, barValue)])
            .range([0, h]);

        var bars = svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")

        var barsAttr = bars 
            .attr("x", function(d, i) {
                return xScale(i);
            })
            .attr("y", function(d) {
                return h - yScale(barValue(d));
            })
            .attr("width", xScale.rangeBand())
            .attr("height", function(d) {
                return yScale(barValue(d));
            });
    };

我错过了什么？

Answer 1

您需要做的是将字符串转换为数字，即

d3.csv("google-user-data-requests.csv", function(data) {
    dataset = data;
    dataset.forEach(function(d) {
      d['User Data Requests'] = +d['User Data Requests'];
    });
    generateVis();
});

您可能还想解析日期并将其格式化。

d3具有奇怪输出值的线性标度

1 个答案: