2

私は再利用可能な棒グラフの例に取り組んでおり、単純な配列で動作させました。ただし、json オブジェクトを介してデータを追加したため、これ以上機能させることができません。含める追加データは、ビジュアライゼーションに追加するために必要なディメンションとラベルです。私はd3.v3.jsを使用しています。

  • 明確にするために、これは縦 (縦棒) グラフではなく、横棒グラフ用です。

単純化された json オブジェクトを次に示します。

var module_1_data = [
    {"dimension1": "snow is fun",
     "dim1_label": "campaign",
     "metric1": 15,
     "met1_label": "clicks"
    }, 
    {"dimension1": "painting for art", 
     "dim1_label": "campaign",
     "metric1": 22,
     "met1_label": "clicks"
    }
];

私のhtmlページからのbar_chart関数への呼び出しは次のとおりです。

bar_chart("220","400",module_1_data,"1")();

reusable_bar_chart.js は次のとおりです: https://gist.github.com/analyticsPierce/5144641

完全な json オブジェクトを含む完全なサンプル ページの html は次のとおりです: https://gist.github.com/analyticsPierce/5154104

また、このサンプル ページを自分のサイトに追加しました: http://www.marketingscience.co/example_d3/bar_chart_example.html

返されるエラー メッセージは次のとおりです。

エラー: 属性 width="NaN" の値が無効です >

bar_chart 関数で幅を console.log でき、data[0].metric1 を介して metric1 の値を console.log できます。ただし、匿名関数を含めると失敗したようで、console.log d を実行できません。

助けや提案をいただければ幸いです。

4

2 に答える 2

2

あなたには2つの主な問題があります。1.データメソッドにデータの配列を提供していません。2。非数値データを幅と高さの属性に詰め込んでいます。

まず、23行目と39行目を確認してください。

bar_chart.selectAll("line")
        .data(x.ticks(10))

と

bar_chart.selectAll("text")
        .data(function(d) { return d.metric1; })

選択範囲にデータを提供していません。データポイントを処理するためのコールバックを提供していますが、まだバインドされているデータがありません。

dataメソッドは、グラフ化するデータ要素の配列を受け入れます。次のようにする必要があります：bar_chart.selectAll（ "text"）.data（data）//渡されたデータ配列を提供します

次に、個々のデータポイントのコールバックを使用します。

また、長方形の幅にファンキーなものを定義しているようです。あなたが行く：

 var x = d3.scale.linear()
      .domain([0, d3.max(function(d, i) { return d.metric1; } )])
      .range([0, 420]);  
      console.log("x: " + x[1]);
    var y = d3.scale.ordinal()
      .domain(function(d) { return d.metric1; })
      .rangeBands([0, 120]);  

    bar_chart.selectAll("line")
        .data(x.ticks(10))
      .enter().append("line")
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", 0)
        .attr("y2", 120)
        .style("stroke", "#ccc");

    bar_chart.selectAll("rect")
        .data(data)
      .enter().append("rect")
        .attr("y", y)
        .attr("width", x)
        .attr("height", y.rangeBand());

長方形要素の幅と高さのオブジェクトを指定しています。これらは単なる数字でなければなりません。

最初にハードコードされたデータを使用してグラフを作成してから、プログラムでデータを提供するパスを作成することをお勧めします。

それはおそらく今のところ良いスタートです。

于 2013-03-12T17:13:06.670 に答える
2

まず、15 行目と 39 行目を確認します。それぞれで、2 つのパラメーターを受け取るメソッドを呼び出します。

  1. データの配列
  2. (オプション) キーメソッド

どちらの場合も、データ配列がありません。

/* line 15 */ d3.max(MISSING_DATA_ARRAY, function(d, i) { return d.metric1; } )

と

/* line 38/39 */ bar_chart.selectAll("text").data(MISSING_DATA_ARRAY, function(d) { return d.metric1; })

39行目の修正により、「metric1 is undefined」エラーが解決されます

次に、数値の配列を使用していたときは、35 行目がうまく機能していました。オブジェクトを使用しているためx、引数として渡されたデータ ポイントに基づいて正しい幅を返す関数であるため、問題が発生します。引数が数値の場合はクールですが、オブジェクトの場合、関数は計算方法を知りません。

したがって、35 行目で次のように置き換えます。

.attr("width", x)と.attr("width", function(d){ return x(d.metric1); })

これら 2 つの修正を組み合わせると、 width="NaN" エラーが解決されます。

于 2013-03-12T18:27:43.170 に答える