Question

我是d3.js的新手，我正在尝试使用json文件构建条形图。这是我的代码：

// scale to ordinal because x axis is not numerical
var x = d3.scaleBand().rangeRound([0, width]);

//scale to numerical value by height
var y = d3.scaleLinear().range([height, 0]);

var chart = d3.select("#chart")
    .append("svg") //append svg element inside #chart
    .attr("width", width + (2 * margin.left) + margin.right) //set width
    .attr("height", height + margin.top + margin.bottom); //set height
var xAxis = d3.axisBottom(); //orient bottom because x-axis will appear below the bars

var yAxis = d3.axisLeft();

d3.json("coucou.json", function (error, data) {
    x.domain(data.map(function (d) {
        return d.time
    }));
    y.domain([0, d3.max(data, function (d) {
        return d.value
    })]);

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

    bar.append("rect")
        .attr("y", function (d) {
            return y(d.responses);
        })
        .attr("x", function (d, i) {
            return x.rangeBand() + (margin.left / 2);
        })
        .attr("height", function (d) {
            return height - y(d.responses);
        })
        .attr("width", x.rangeBand()); //set width base on range on ordinal data

    bar.append("text")
        .attr("x", x.rangeBand() + margin.left)
        .attr("y", function (d) {
            return y(d.responses) - 10;
        })
        .attr("dy", ".75em")
        .text(function (d) {
            return d.responses;
        });

    chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(" + margin.left + "," + height + ")")
        .call(xAxis);

    chart.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + margin.left + ",0)")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("responses");
});

我的json文件：

[{
    "data": [{
            "time": "11:30:00",
            "value": 121863
        },
        {
            "time": "11:35:00",
            "value": 121822
        },
        {
            "time": "11:40:00",
            "value": 121528
        },
        {
            "time": "11:45:00",
            "value": 121288
        }
    ]
}]

当我加载我的html页面时，我遇到此错误： TypeError：data.map不是此行上的函数：

    x.domain(data.map(function (d) {
        return d.time
    }));

我不明白为什么。新版本的语法是否已更改？但我找不到写它的方法......

感谢您的帮助：）

Answer 1

以下是我必须改变的一些事情。

var xAxis = d3.axisBottom(x); 

var yAxis = d3.axisLeft(y);

您忘记添加(x)＆amp; (y)

var chart = d3.select("#chart").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 + ")");

将g附加到图表变量旁边，这样更容易

在您的数据代码段中没有d.responses因此我将其更改为d.value

以下是您访问json数据的方法

var data = data1[0].data;

这是一个有效的Plunker

Answer 2

在我的情况下，这是因为数据未完全按照示例的方式加载。所以我修正了这样做的错误：

 var dataCsv = d3.csv("../dashboard/sample-dataset.csv");

 dataCsv.then(function (data) {

  ...
  your function
  ...
  
 });

d3.js错误data.map不是函数

2 个答案: