1つのsvg内に同一のタグでデータバインドして描画する方法について

Question

棒グラフ部分の文字情報部分に関する質問になります。
（棒グラフはネット上のグラフの中から適当に私の質問にあうものをサンプルに探してきたものです）

サンプル画像のようなグラフを作りたいと考えています。
質問を簡略化するため、描画位置の属性は省略しています。

下記のデータをサンプルにように文字列出力するためにバインドする方法で悩んでいます。

var dataset1 = [1684, 1247, 1198, 965, 648];
var dataset2 = ['東京','大阪','福岡','名古屋','仙台'];

d3.select("svg").selectAll("p")
.data(dataset1)
.enter()
.append("p")
.text(function(d) { return d + ""; });

これで、dataset1についてはバインドしつつ、描画できました。

しかし、上記を行った後、
d3.select("svg").selectAll("p")
.data(dataset2)
.enter()
.append("p")
.text(function(d) { return d; });

としても、dataset2の情報が描画できません。

私の考えでは、selectAll("p")で取得したオブジェクトの数が
dataset2の数と同様であるため、何も生成されないのでは無いかと考えましたが、
確信に至りません。

制約としては、
・1つのsvgタグ内にdataset1とdataset2の内容を描画したい。
・2種類のデータセットを反映させる際、それぞれ同じタグでappendしたい。上の例ではp。

どんな方法があるのか、大変お手数ですが、お知らせいただければ大変うれしいです。

どうぞ、よろしくお願いいたします。

Answer 1

自己解決しました。

https://codeday.me/jp/qa/20190317/411534.html
が、参考になりました。

セレクターにクラスをつけて
selectAllすることで、データごとに独立させたテキスト表示ができました。