4

ポイントが名前とそれに付随する番号で配置されている d3.js を使用して散布図を作成します。プロットされるデータは次のようになります。

name,   group, number
"AB",   "A",   0.5
"ABC",  "A",   10.0
"BC",   "B",   3.0
"BCD",  "B",   5.0
"BCDE", "B",   0.3
"CD",   "C",   1.6
"DE",   "D",   1.5

私が達成したいこと。

私が達成したいのは、名前に従ってポイントが x 軸上に散らばっているプロットですが、x 軸はグループごとに 1 回グループを表示し、異なるグループ間で目盛りを表示する必要があります。

結果は次のようになります。 ここに画像の説明を入力

私がこれまでに持っているもの。

私はy軸とx軸を持っていますが、目盛りとラベルは表示されていません。原則として、軸は以下のコードを使用して作成されます (x 軸の例)。

var x = d3.scale.ordinal()
    .rangeBands([0, 400]);
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(0) // hide ticks
    .tickFormat(""); // hide labels

ドメインは名前列から派生します。

x.domain(data.map(function(d) { return d.name; }));

そして実際のsvgに追加されます：

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + 400 + ")")
    .call(xAxis)

このコードは、次のプロットになります。 空の軸でプロット

私が試したこと。

上記の最初の x 軸を作成するために使用した手順を繰り返すだけで、 2 番目の x 軸を追加してみました。名前をに変更xしx2、目盛りとラベルを表示して、ドメインを からではなく から派生させましd.nameたd.group。完全なコードはこちらです。当然、これは x 軸全体に沿ってラベルと目盛りを分散し、グループ情報を組み込みません。 グループからのラベルでプロット

質問。

データのグループ列に従って、x 軸のラベルと目盛りを分散するにはどうすればよいですか?

4

1 に答える 1

2

素朴なアプローチ

これを処理する単純な方法の 1 つですが、おそらく望ましくない方法は、 を使用tickFormatして、スケール上の各序数の値に対してグループ値を単純に繰り返すことです。

var lkUp = {};
chartData.forEach(function(d) { lkUp[d.name] = {group: d.group}; });
xAxis.tickFormat(function(d) { return lkUp[d].group; });

単純なグループ化

作業例: http://bl.ocks.org/jsl6906/64de7c45e4484114334b

一から描く

D3 のaxisコンポーネントを使用しない場合は、これらのグループを個別に描画できます。つまり、次のようになります。

//'chartGroups' is an array of calculated groups, with start and end coordinates
var chartGroups = svg.selectAll("g.chartGroup").data(chartGroups)
  .enter().append("g").attr(..);
chartGroups.append("text").attr(..);
chartGroups.append("path").attr(..);

一から描く

作業例: http://bl.ocks.org/jsl6906/a8a4dd54f3d8de6a7aae

于 2014-09-19T21:15:54.840 に答える