使用外部d3.js的数据

时间:2014-07-16 14:21:19

标签: javascript svg d3.js

我对d3的数据绑定功能印象深刻。在应用程序中,我需要d3中的数据用于外部函数。

例如,如果数据为:[33,54,14,45,322,653,11]。然后我们做:

svg.select("selection_element").data(data).enter()....

现在我没有像上面那样输入,而是希望在其他地方使用来自d2的这一数据。我可以通过循环数据来实现它,但是想要使用D3的域,范围和轴方法。我是否有可能从D3创建数据数组并使用enter()方法将每个传入数据推送到这个新数组。无法弄清楚任何事情。

1 个答案:

答案 0 :(得分:2)

这非常简单。您可以照常在D3中定义比例和轴,然后通过调用D3方法将输入数组映射到新的对象数组。然后,您可以轻松地将此数据传递给Snap.svg。

var input = [33, 54, 14, 45, 322, 653, 11];

var xScale = d3.scale.ordinal()
    .domain(input)
    .rangeBands([0, 550]);

var yScale = d3.scale.linear()
    .domain([0, 800])
    .range([275, 0]);

var output = input.map(function(value){
    return {
        x: xScale(value),
        y: yScale(value)
    };
});

var svg = Snap("svg");

output.forEach(function(value){
    var c = svg.circle(value.x, value.y, 5);
});

Here是一个演示此功能的JSBin。