特设D3功能

我有n列数据，我想从D3散点图。它需要2列来制作一个绘图，因此n列将以相同代码的2次n置换结束，我想从中绘制一个绘图函数。问题是我不知道如何在D3时尚中设置变量。数据和代码片段的例子如下。我很欣赏任何提示。谢谢。特设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，使功能与原始数据集重建的两列数据集，而不是绘制散点图的功能。它可能不够高雅，但可以工作。：）谢谢！

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');

来源

2014-10-19 ngungo

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

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

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

更接近你想要的（也许？）是数组的产品，它给出n个数组是每种方法从每个选择1项。这通常表示为内部数组长度为n的数组数组。似乎没有D3功能来做到这一点（我会支持添加一个），但你可以看到这个SO post。（与Underscore没有运气无论是。）

但既然你已经有了你的矩阵，也许你需要知道的是，像attr功能通过他们的第二个参数（当一个函数）不只是数据d也是指数i 。你也可以尝试使用each和/或forEach从一个值的数组到单个值，保持索引不同以获得你的2D坐标。

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

来源

2014-10-19 17:20:44 mgold

我把减少数据集，以2列数据集的提示。查看编辑。谢谢！ – ngungo 2014-10-19 19:18:24

很高兴我能帮忙;感谢接受。 – mgold 2014-10-19 19:44:41

特设D3功能

回答

相关问题