音楽関連のデータ(メタデータ)を含むCSVファイルがあります。データ構造は次のようになります:ジャンル、アーティスト、トラック
ジャンルは最初のカテゴリであり、アーティストは2番目の意味で、ジャンルには多くのアーティストがいるため、アーティストには多くの曲が含まれる場合があります。
これが私のコードです:
var dataset = d3.csv("musictrackstiny.csv", function(musicdata){
var genre=d3.nest()
.key(function(d) {return d.genre;})
.sortKeys(d3.ascending)
.entries(musicdata);
var g=svg.selectAll("g").data(musicdata).enter()
.append("g")
.attr("transform",function(d,i) {return "translate("+(120*i)+",0)";});
g.append("rect")
.attr("x",cmargin)
.attr("y",cmargin)
.attr("width",cwidth-2*cmargin)
.attr("height",cheight-2*cmargin)
.append("title")
.text(function(d) {return d.genre;})
g.append("text")
.attr("y",cheight+10)
.attr("x",cmargin)
.text(function(d) {return d.genre;})
問題は、関数を使用しているにもかかわらず、ディスプレイに重複するgenre
エントリが多数表示されることです。keys
Artists
私の最終的な目的は、最初のノードとして、次にその子としてジャンルを持つツリー/グラフを作成することです。長方形を使用した現在の表示は、その概念が機能することをテストするためのものです。曲に関連する多くのジャンルとアーティストが存在することに注意してください。私はこのようなツリー構造を探しています: