20

次のような列にデータを含む外部 csv ファイルがあります。

name, field_goal_attempts, field_goal_makes

線形スケールを使用しようとしていますが、ドメインの最大値を取得するのが困難です。

var yScale = d3.scale.linear()
               .domain(0, d3.max(...

私は混乱しています：

1) yScale 関数を外部または内部に配置する必要があるかどうか

d3.csv("filename.csv", function(data) {

コールバック関数; と

2) field_goal_attempts 列の項目の最大値を取得して、yScale 関数にフィードする方法。

現在の私のコードは次のとおりです。

var yScale = d3.scale.linear()
    .domain([0, 4000]) //d3.max(data, function(d) {return d })])
    .range([0, 500]);

d3.csv("test.csv", function (data) {
    svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("fill", "blue")
        .attr("x", magic_number) // I'm not concerned about the magic numbers at this point :)
        .attr("y", 0)
        .attr("width", another_magic_number)
        .attr("height", function (d) {
            return d.field_goal_attempts
        })
        .attr("id", function (d, i) {
            return i
        });
});
4

2 に答える 2

38

csv ファイルのデータは、csv 関数に渡すコールバックに含まれます (この場合は「データ」パラメーター)。そのため、csv 関数の外で yScale を定義できますが、最大値をデータに依存させたい場合は、コールバック内で設定する必要があります。

最大値を見つけることに関しては、配列で機能する多くの D3 関数は、正確にシナリオに応じてオプションのアクセサー関数を受け入れます。したがって、使用する最大値を計算します。

var max = d3.max(data, function(d) { return +d.field_goal_attempts;} );

したがって、次の 2 つの方法のいずれかですべてをまとめることができます。

var yScale = d3.scale.linear().domain(0,100);
d3.csv("test.csv", function(data){
    var max = d3.max(data, function(d) { return +d.field_goal_attempts;} );
    yScale.domain([0,max]);
    ...
}

また

d3.csv("test.csv", function(data){
    var max = d3.max(data, function(d) { return +d.field_goal_attempts;} );
    var yScale = d3.scale.linear().domain([0,max]);
    ...
}

max と min の両方を見つけたい場合は、d3.extent(...) を使用することをお勧めします。これは、アクセサー関数も受け入れ、最小値と最大値を含む長さ 2 の配列を返します。

于 2013-05-02T23:50:44.393 に答える
2

1) yScale はd3.csv()、最大値を計算したときに関数内のドメインを更新する限り、関数の外に留まることができます。たとえば、 の内部で次のことができますd3.csv()。

yScale.domain([0, my_max])

2）最大値を計算するために、私が通常使用する方法は次のとおりです。

//Create list containing only field_goal_attempts
field_goal_attempts_list = data.forEach(function(d){return d.field_goal_attempts})

//Compute max using d3.max() function
field_goal_attempts_max = d3.max(field_goal_attempts_list)

そのような関数を に渡すことはd3.max()素晴らしいことですが、私が知る限りそうではありません。最初にリストを計算してから最大値を計算する利点は、最小値、平均値などを計算する場合に計算量が少なくて済むことです。

于 2013-05-02T23:08:07.223 に答える