0
最初に私はツリー構造オブジェクトを取得する場所からこのWeb APIを作成しました。D3.jsのWEB APIサービス呼び出しでサークルパッキングを行う
次に、このAPIをD3で呼び出すと、以下のようになり、データがD3.js円パッキンググラフとして表示されます。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/d3js/3.5.16/d3.js"></script>
<script>
var diameter = 700,
format = d3.format(",d");
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function (d) { return d.salary; });
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(2,2)");
d3.json("http://localhost:56935/api/values", function (error, root) {
var node = svg.datum(root).selectAll(".node")
.data(pack.nodes)
.enter().append("g")
.attr("class", function (d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function (d) { return d.name + (d.children ? "" : ": " + format(d.salary)); });
node.append("circle")
.attr("r", function (d) { return d.r; });
node.filter(function (d) { return !d.children; }).append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function (d) { return d.name.substring(0, d.r/3); })
.style("font-size", 20);
});
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</head>
<body>
</body>
私も単一のエラーを得ていない、D3.json（）関数ではなく、私のサークルパッキングのグラフを介してデータを取得していますが。これらのグラフを作るために私を助けてください。どこに欠けているの？
ウェブAPIによって復帰JSONの構造は、オブジェクト（現在の戻りリストから最初の要素）を返す代わりに、エンドポイントでListを返す
[{"Id":1,"Name":"James","Salary":null,"Refid":null,"Children":[{"Id":2,"Name":"David","Salary":null,"Refid":1,"Children":[{"Id":3,"Name":"Richard","Salary":null,"Refid":2,"Children":[{"Id":4,"Name":"John","Salary":1000,"Refid":3,"Children":[]},{"Id":5,"Name":"Robert","Salary":4000,"Refid":3,"Children":[]},{"Id":6,"Name":"Paul","Salary":6000,"Refid":3,"Children":[]}]},{"Id":7,"Name":"Kevin","Salary":null,"Refid":2,"Children":[{"Id":8,"Name":"Jason","Salary":5000,"Refid":7,"Children":[]},{"Id":9,"Name":"Mark","Salary":null,"Refid":7,"Children":[{"Id":10,"Name":"Thomas","Salary":1000,"Refid":9,"Children":[]},{"Id":11,"Name":"Donald","Salary":1000,"Refid":9,"Children":[]}]}]}]}]}]
受信しているjsonの構造を投稿できますか？ – iulian
@iulian私はちょうどjson構造を投稿しました – user3235118
匿名の親愛なる方に、以下の私の答えがあなたを助けましたか？ – iulian