Question

我有n列数据，我想从中制作D3散点图。制作一个图需要2列，所以n列最终将是我想要制作绘图函数的相同代码的2倍的n次排列。问题是我不知道如何以D3方式设置变量。下面是数据和代码片段的示例。我很欣赏任何提示。感谢。

// Potentially, there are a lot more columns.
var data = [ 
    {"col1": 34, "col2": 54, "col3": 345, "col4": 35, "col5": 52},
    {"col1": 75, "col2": 98, "col3": 917, "col4": 03, "col5": 47},
    {"col1": 63, "col2": 23, "col3": 236, "col4": 34, "col5": 78},
    {"col1": 23, "col2": 38, "col3": 198, "col4": 12, "col5": 18},
    {"col1": 57, "col2": 48, "col3": 274, "col4": 67, "col5": 39},
    {"col1": 65, "col2": 12, "col3": 381, "col4": 27, "col5": 45}
]; 

// The code is long
// I just list here the parts that are involved
// How to replace FOO and BAR with a pair of parameters "col1", "col2", etc ...
var x = d3.scale.linear().range([0, width]),
    y = d3.scale.linear().range([height, 0]);
x.domain(d3.extent(data, function(q) {return q.FOO;}));
y.domain(d3.extent(data, function(q) {return q.BAR;}));

svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
        .attr("r", 4)
        .attr("cx", function(d) {return x(d.FOO);})
        .attr("cy", function(d) {return y(d.BAR);})
        .style('fill', 'blue');

编辑：我从mgold中提取了一个提示，并创建了一个函数来将原始数据集重建为2列数据集，而不是绘制散点图的功能。它可能不优雅，但只是工作。 :)谢谢！

function get2Columns(foo, bar) {
    var tempArr = [];
    for (var i = 0; i < data.length; i++) {
        tempArr.push({"FOO":data[i][foo],"BAR":data[i][bar]});
    }
    return tempArr; 
}
data = get2Columns('col1', 'col2');

Answer 1

我不确定你究竟想要什么，但我可以尝试谈论我认为相关的事情，并希望能给你一些线索。

我会将您的数据表示为数组数组，而不是对象数组。这使得它更适合 array methods ，来自vanilla JavaScript和D3。转置方法可能特别有用，加上一些映射和减少，用于查找范围。

有几种方法可以从数组或类似的数据结构中选择两个元素。 Zipping 接受一对数组并返回一对数组：第0项在一起，第1项在一起，依此类推。配对获取一个数组并返回连续的对。这些都在这些数组方法中有D3实现。

更接近您想要的（可能？）是数组的产品，给定n个数组是从每个数据中挑选1个项目的方法。这通常表示为数组数组，其中内部数组的长度为n。似乎没有D3函数来执行此操作（我支持添加一个），但您可以看到此SO post。（Underscore也不幸运。）

但是既然你已经有了矩阵，也许你需要知道的是像attr这样的函数传递它们的第二个参数（当一个函数时）不仅仅是基准d而且还传递了索引{{ 1}}。您还可以尝试使用each和/或forEach从值数组到单个值，保持索引不同以获得2D坐标。

（重读时，最后一段可能是最有帮助的。）

Ad hoc D3功能

1 个答案: