1

d3 チャートに一連の垂直線を描画しようとしています。このためのデータ ソースは、(データ内の) x 位置のリストでありx()、正しい位置を与えるために scale 関数を介してマップされます。

現在、これは変数forの各エントリのループとして実装されています。labelsy の起点と終点は、データminYとから取得されますmaxY。行末にテキストラベルが付きます。

labels = [
 {
  'x':50,
  'label':test'
 }

 var label = svg.append("g")
        .attr("class","ilabel")

// Labels         
for (var i = 0; i < labels.length; i++) {
    labl = labels[i];

    label.append('line')
        .attr('x1', x( labl.x ) )
        .attr('y1', y( maxY ) )
        .attr('x2', x( labl.x ) 
        .attr('y2', y( minY ) )
        .attr("class","ilabel-line");

    label.append("text")
        .attr("transform", "translate(" +  x( labl.x )+"," + y( maxY )+ ") rotate(-60)")
            .style("text-anchor", "start")
            .attr("dx", ".5em")              
            .attr("class","ilabel-label")

      .text(labl.label);

}

これをデータ駆動型の方法で書き直すにはどうすればよいでしょうか。つまり、ラベルを として渡し、.dataこれを繰り返して一連の平行な垂直線を描画します。

var label = svg.selectAll(".ilabel")
      .data(labels)
    .enter().append("g")
      .attr("class","ilabel")

私が頭を悩ませているのはx()andy()関数です。もちろん、線の x 位置 (特定の線に対して定数) を返す必要がありますが、定義された 2 つの点 ( & )x()の間に線を描画するために y 関数がどのように/何を返す必要がありますか。minYmaxY

line = d3.svg.line()
  .x(function(d) { return x(d.x); })
  .y(function(d) { return y(d.y); });

label.append('path')
  .attr("d", line)

明らかな何かが欠けているように感じます。

4

2 に答える 2

3

d3 で軸関数を使用できます。Bl.ocksのこの例を見てください。tickValuesを使用して目盛りを簡単に設定し、次に innerTickSize と outerTicksize を使用して目盛りの長さを設定できます。また、向きを設定する必要があります。

于 2013-09-16T11:44:09.127 に答える
0

rect線ではなく、影付きの領域として領域を使用することになりました。ただし、これに戻ると、一連の長方形と一連の直線を描画するためのコードはほとんど同じであることがわかりました。.line()混乱は、を生成するために使用されるd3 関数から生じていましたpath。ただし、ジェネレーター関数を使用してデータを渡すことにより、一連の直線を作成できますsvg:line(ここでは辞書にラップされています)。

var line = {
    'x1':(function(d) { return x( labl.x ); }),
    'y1':(function(d) { return y( maxY ); }),
    'x2':(function(d) { return x( labl.x ); }),
    'y2':(function(d) { return y( minY) }),
    }


var label = svg.selectAll(".labels")
      .data(labels)
      .enter();

    label.append("svg:line")
            .attr("x1", line.x1)
            .attr("y1", line.y1)
            .attr("x2", line.x2)
            .attr("y2", line.y2)
        .attr("class","label-line");
于 2013-09-18T22:29:51.207 に答える