0

複数の線パスを使用して、D3で時系列の折れ線グラフを作成しようとしています。これらのパスにテキストラベルを適用したいと思います。

私が現在行っているのは、ユーティリティ関数を使用して、データのプロパティ（ jsonデータのキーであるd3.svg.lineの値）に基づいていくつかの要素を作成することです。plotProps

function makeLine(prop){
         return d3.svg.line()
            .x(function(d){ return x(d.date); })
            .y(function(d){ return y(d[prop]); });

    }

var plotProps = ['registered','subscribers','total','anonymous'];

 plotProps.forEach(function(prop){
        line = makeLine(prop);
        svg.append("path")
          .datum(graph_data)
          .attr("class", "line datapath")
          .attr("d", line)
          .attr('prop',prop)
          .style('text-anchor','middle');

      svg.append('svg:text')
        .attr('class','label')
        .attr("y", "")
        .attr("x", "")
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text('foobar');

    });

ここでの私のアプローチは、データソースが動的である場合、ライン生成に互換性がないという点で、d3のデータ結合アプローチとは非常に直感に反しているように感じます。ラベルもきちんと表示されていないようです。ほとんどの例では、g要素に追加されたラベルを使用しています-私の場合のパスにラベルを追加する必要がありますか（各行の上のテキストのみ）？追加するテキスト要素のx、y属性に関数を渡すと、引数がログに記録されたときにコンソールに何も出力されません。

これらのラベル呼び出しを連鎖させることができる複数の行を生成する方法はありますか？私は十分に明確になっていると思います。

4

1 に答える 1

1

あなたがやりたいのはネストされた選択のようです。これを行うには、データを少し再フォーマットする必要があるかもしれませんが、その後、異なる行の配列の配列を渡し、それに応じて各行を追加できるはずです。テキストラベルも同様に機能します。

テキストラベルが機能しない理由は、おそらく、属性xとy属性を設定していない（または有効な値に設定していない）ためです。

于 2013-03-11T18:19:48.223 に答える