4

d3.svg.line() を使用して d3js で線を引こうとしていますが、成功しません。

var line = d3.svg.line()
    .x(function(d) { return Math.random() * 1000 })
    .y(function(d) { return Math.random() * 1000});

svg.selectAll("path")
        .data([1,2,3,4,5,6]).enter()
        .append("path")
            .attr("d", line) # line generator 
            .attr("class", "line")
            .style("stroke", "black" );

エラーが発生するかどうかを確認するために意図的に gğıgğı を挿入しましたが、エラーは発生しませんでした。x および y 関数が呼び出されていないようです。gğıgğı の有無にかかわらず、空のパス要素を作成するだけです。

<path class="line"></path>

ラインジェネレーター「ライン」を次のように置き換えると

"M0,0l100,100"

うまく線が引けます。

サンプルコードはhttp://jsfiddle.net/99mnK/1/にあります

ここで何が間違っていますか？

編集 作業バージョンはhttp://jsfiddle.net/99mnK/2/にあります。d3.svg.line().data は次のような 2 次元データ配列を期待しているようです

[[1,1],[2,2],[3,3],[4,4],[5,5],[6,6]]

それ以外の

[1,2,3,4,5,6]
4

1 に答える 1

11

d3.svg.line()それ自体では、セレクターと連携するように完全には作成されていません。そのため、関数として関数に渡すのではなく、値の配列を使用して呼び出す必要があり.attr()ます。

だから、あなたが持っているとしましょう：

var array = [1,2,3,4,5,6]
var line = d3.svg.line()
    .x(function(d) { return Math.random() * 1000 })
    .y(function(d) { return Math.random() * 1000});

次に、6 つのランダムなポイントを持つパスの説明を取得するには、次のものが必要です。

line(array);

そして、それを svg に適用するにはpath:

.append('path')
.attr('d', line(array))

編集したフィドルが機能する理由lineは、配列の各サブ要素で関数が呼び出されているためです。

.line([1,1])
.line([2,2])
.line([3,3])

これが、ご想像のとおり、6 つのポイントではなく、2 つのポイントだけで描かれた線が表示される理由を説明しています。

最後に、あなたの例がおそらくやろうとしていたように、6つのパスを描く方法を示す編集されたフィドルがあります: http://jsfiddle.net/mharen/3cv3T/5/

于 2012-11-27T00:26:52.187 に答える