0

複数系列の折れ線グラフにシンボルを配置しようとしています。d3.js API リファレンスでは、シンボルは変換関数を使用して配置されます。

vis.selectAll("path")
    .data(data)
    .enter().append("path")
    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
    .attr("d", d3.svg.symbol());

残念ながら、これを適用して、以下に示し、この例で説明されているように、d.date といくつかの d.temperature セットにアクセスする独自の function(d) コールバック関数を構築することはできないようです。

var cities = color.domain().map(function(name) {
    return {
        name: name,
        values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]}; <-- stored in 'd.values'
    })
};});

私が試行錯誤して思いついたのは次のとおりです。これは、コミックリリーフのために提供しています。

for (i=0; i<cities[0].values.length; i++) // note: for comic relief only
{
    vis.selectAll(".class")
    .data(cities)
    .enter().append("path")
    .attr("transform", function(d) { return "translate(" + x(d.values[i].date) + "," + y(d.values[i].temperature) + ")"; })
    .attr("d", d3.svg.symbol())
}

それは実際に機能します。これは面白いと思いますが、適切にネストされた関数を作成しようとする私の試みは、これまでのところ失敗しています。たとえば、これは transform="translate(NaN,NaN)" を与えます

.attr("transform", function(d) { return "translate(" + x(d.values, function(c) { return c.date}) + "," + y(d.values, function(c) { return c.temperature}) + ")"; })

私は何を理解していませんか？どんな援助でも大歓迎です。

4

1 に答える 1

1

あなたの試みのコードでは、あなたは拘束していますがdata、私はあなたが意味していると思いますよcitiesね？リンク先の例の変数には、TSV ファイルから読み取られたデータが含まれているため、プロパティdataはありません。values

cities変数は、ネストされたデータ構造を指します。各都市 (系列) には、線 (値) を構成するデータ ポイントのリストが含まれています。各都市は個別のパスであり、パス定義は値のリストで構成されているため、このネストはパスを作成するときに便利です。しかし、図形を適用する場合、グループ化はもう必要ありません。値ごとに形状を作成/配置できるように、値のリストが必要です。

ネストされた構造から値を抽出しようとする代わりに、データ変換を実行して値のフラットなリストを作成するのがおそらく最も簡単でしょう。各ノードに都市名を入れていることに注意してください。おそらくこれを使用して、都市ごとの色またはタイプを形状に適用する必要があるためです。

var values = [];
cities.forEach(function(city) {
    city.values.forEach(function(v) {
        values.push({
            date: v.date,
            temperature: v.temperature,
            city: city.name
        });
    });
});

次に、この配列を使用して形状を作成するだけです。各値には、適切な場所に配置するために必要なすべての情報が含まれています。質問からいくつかのコードをコピーするには:

vis.selectAll("path")
    .data(values)
    .enter().append("path")
    .attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.temperature) + ")"; })
    .attr("d", d3.svg.symbol());

これにより、すべて同じ形状が作成されますが、前述のように、d.city を使用してシンボル タイプまたはストロークの色を変更できます。これを行うには、単純な序数スケールまたは都市名をドメインとして使用したカラー スケールを使用できます。

**編集：グループ化されたデータ構造を使用してこれをさらに変換せずにこれを行いたいというあなたのコメントによると、ループ内の複数のデータ結合でそれを行う方法は次のとおりです。

for (i=0; i < cities.length; i++) {
    vis.selectAll(".class")
        .data(cities[i].values)
        .enter().append("path")
            .attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.temperature) + ")"; })
            .attr("d", d3.svg.symbol())
}
于 2013-08-24T06:47:13.487 に答える