6

私はd3とnvd3に比較的慣れていないので、例と同じように、序数のy軸を使用して単純な散布図を作成したいと考えていました。したがって、y 軸の値はカテゴリ文字列です。これは私がする必要があると私が思ったことです：

var xfun = function (d) { return d.Pos }    //simple ints
  , yfun = function (d) { return d.Title }  //the ordinal values

var chart = nv.models.scatterChart()
    .showDistX(true)
    .showDistY(true)
    .color(d3.scale.category10().range())
    .margin({ top: 30, right: 20, bottom: 50, left: 130 })
    .tooltips(false)
    .x(xfun)   
    .y(yfun);

// create an ordinal scale with some test values
var ys = d3.scale.ordinal()
    .domain(["this","is","an","ordinal","scale"])
    .range(5);

// tell nvd3 to use it
chart.yAxis.scale(ys);

// add to the page
nv.addGraph(function () {
    d3.select(selector).datum(data).transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});

ただし、運が悪い：

Error: Invalid value for <circle> attribute cy="NaN" d3.js:690
Error: Invalid value for <line> attribute y1="NaN" d3.js:690
Error: Invalid value for <line> attribute y2="NaN" d3.js:690
Error: Invalid value for <circle> attribute cy="NaN" d3.js:7532
Uncaught TypeError: Cannot read property '0' of undefined 
..

また、y 軸は単純に -1 から 1 までの線形軸を示しています。興味深いことに、y=-1 と y=1 (極値) にいくつかの円がプロットされています。

手動で cy の正しい値を強制するために、call(chart) の後に追加してみました:

d3.selectAll("#mychart circle").attr("cy", function(d){
        return = ys(yfun(d));
        });

しかし、それでも同じエラーです。序数スケールを適切に機能させるにはどうすればよいですか? nvd3 凡例を使用してデータ系列 (異なる x/y データを含む) を切り替えるときにも、正しく更新する必要があることに注意してください。

github に関連する質問がありますが、解決策はありません。

更新：いくつかのデバッグの後、置き換えchart.yAxis.scale(ys)てみましたがchart.scatter.y(ys)、これによりエラーが解消されます。説明書も落とせますselectAll。

ただし、y 軸は引き続き 0.99 ～ 1.01 の線形スケールを示し、すべてのポイントは y=1 にプロットされます。一歩近づきましたが、序数スケールはまだありません。

4

3 に答える 3

6

他の誰かがこれに出くわした場合に備えて、これが私のために働いたものです: 軸 (私の場合は X) に序数スケールを強制しようとする代わりに、線形スケールを使用しましたが、目的のラベルを返すカスタム tickFormat 関数を提供しました.

chart.xAxis.tickFormat(function(d){
            return labelValues[d];
        });

数値と目的のラベルの間で labelValues がマップされる場所。

于 2014-01-10T02:28:03.543 に答える
2

@robinfhuによる簡単な解決策があります。

序数スケールを使用しないでください。

代わりにx、要素のインデックスを返すように関数を設定します。

chart.x(function(d,i){ return i;})

そしてtickFormat、適切なラベルを読み取るように関数を設定します。

tickFormat(function(d) {return that.data[0].values[d].x;})

施工例：プランカー

コピーアンドペースト：

  nv.models.lineChart()
    .x(function(d, i) {
      return i;
    }).xAxis
    .tickFormat(function(d) {
      return that.data[0].values[d].x;
    });
于 2016-01-27T11:37:39.297 に答える