使用d3.js

Question

我想创建这个动态js函数，用户可以通过构造查询字符串然后使用d3绘制返回的json来选择json请求中返回的值。像这样：

function line_chart(canvas_element, request_url, x_axis, y_axis) {

    var svg = d3.select(canvas_element)
    //...other code to set tup the canvas

    // construct the url
    var url = request_url+"?x_axis="+x_axis+"&y_axis="+y_axis

    d3.json(url, function(error, data){
        if(error) return console.warn(error);

        // scale the range of data
        x.domain(d3.extent(data, function(d) {return d.x_axis;}));
        y.domain([0, d3.max(data, function(d) {return d.y_axis})]);

        // other code to draw the svg, axes etc..
   };
};

现在，如果我设置x_axis="tomatoes"和y_axis="bananas"，我会像这样得到json数据：

[{"tomatoes": 1 , "bananas": 40}, {"tomatoes": 2 , "bananas": 30},
{"tomatoes": 3 , "bananas": 78}]

但我的扩展数据范围d.x_axis的代码不起作用，因为它正在寻找json x_axis中不存在的字段。我怎么能写这个，所以我可以让js查找指定为函数的输入变量的任何字段？

Answer 1

只需将您的访问者功能修改为动态：

x.domain(d3.extent(data, function(d) {return d[x_axis];}));
y.domain([0, d3.max(data, function(d) {return d[y_axis];})]);

d[x_axis]会使用x_axis的值来查找属性d.tomatoes。