4

ここにある例に基づいて折れ線グラフを作成しました。

http://bl.ocks.org/mbostock/3884955

ただし、私のデータでは、異なるラインの y 軸の最終値が頻繁に接近しているため、ライン ラベル (都市) が重なり合ってしまいます。各行の最後の値を比較し、値の差が 12 単位以下の場合はラベルを上下に移動する必要があることはわかっています。私の考えは、このコードによって書かれたテキストラベルを見ることです

city.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," +  y(d.value.temperature) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; });

y(d.value.temperature) 値の差が 12 以下の場合は、値の間に少なくとも 12 単位が入るまで値を離します。これを実現する方法について何か考えはありますか？これは私の最初の d3 プロジェクトであり、構文はまだ適合しています!

4

2 に答える 2

2

一度にすべてのラベルを渡した方がよいでしょう。これは、一般的な d3 の考え方とも一致しています。次に、次のようなコードを作成できます。

svg.selectAll("text.label").data(data)
   .enter()
   .append("text")
   .attr("transform", function(d, i) {
       var currenty = y(d.value.temperature);
       if(i > 0) {
           var previousy = y(data[i-1].value.temperature),
           if(currenty - previousy < 12) { currenty = previousy + 12; }
       }
       return "translate(" + x(d.value.date) + "," +  currenty + ")";
   })
   .attr("x", 3)
   .attr("dy", ".35em")
   .text(function(d) { return d.name; });

これは、以前のラベルが移動された可能性があるという事実を考慮していません。前のラベルの位置を明示的に取得し、それに応じて現在のラベルを移動できます。this後でアクセスできるように、現在の要素 ( ) への参照を保存する必要があることを除いて、コードはほとんど同じです。

これらすべてが、ラベルが最終的にラベル付けしている行からかなり離れている可能性を防止するものではありません。すべてのラベルを移動する必要がある場合、最後のラベルはかなり離れています。必要に応じてラベルと線の間隔を空けることができる凡例を個別に作成することをお勧めします。

于 2013-04-01T18:13:08.480 に答える