Javascript 需要d3.js逻辑来处理JSON数据
我进入d3.js已经2天了,我已经建立了这个用于网球比赛的抽签结构 下面是我开始的数据-Javascript 需要d3.js逻辑来处理JSON数据,javascript,json,d3.js,Javascript,Json,D3.js,我进入d3.js已经2天了,我已经建立了这个用于网球比赛的抽签结构 下面是我开始的数据- var数据=[ [“安迪”、“马林”]、[“大卫”、“凯伊”]、[“诺瓦克”、“斯坦尼”]、[“罗杰”、“盖尔”]、[“菲利普”、“约翰”]、[“米洛斯”、“拉法”]、[“托马斯”、“格里格”]、[“乔维”、“吉尔”], [Marin]、[Kei]、[Stani]、[Roger]、[John]、[Rafa]、[Tomas]、[Jo Wi], [Marin]、[Stani]、[John]、[Jo Wi],
var数据=[
[“安迪”、“马林”]、[“大卫”、“凯伊”]、[“诺瓦克”、“斯坦尼”]、[“罗杰”、“盖尔”]、[“菲利普”、“约翰”]、[“米洛斯”、“拉法”]、[“托马斯”、“格里格”]、[“乔维”、“吉尔”],
[Marin]、[Kei]、[Stani]、[Roger]、[John]、[Rafa]、[Tomas]、[Jo Wi],
[Marin]、[Stani]、[John]、[Jo Wi],
[Stani”,“John”]
];代码>您希望它成为的结构应该与原始结构一样工作,因为它本质上仍然是一个3级数组,与以前一样,但由于现在正在将内容包装到对象中,因此必须调整渲染时访问子数组的方式。我已经在这3个地方做了标记,比如hey meetamit-非常感谢。解决方案是有效的。当然,我发布的json示例有错误,但您知道了。让我将“源目标”合并到我的代码中。进一步更新-我已经将早期的逻辑(随后由@meetamit更正)抛出了窗口。强制布局运行良好,代码减少70%。对我d3.js的第三天来说还不错。干杯
var level = svg.selectAll(".level")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(" + (i * 200) + "," + Math.pow(2,i)*matchY/2 + ")"; })
.attr("class", "level");
var match = level.selectAll(".match")
.data(function(d) { return d.matches ; })// <-- THIS
.enter().append("g")
.attr("transform", function(d, i, j) { return "translate(0," + (Math.pow(2,j)*i*matchY) + ")"; })
.attr("class", "match");
var player = match.selectAll(".player")
.data(function(d) { return d.seeds; })// <-- THIS
.enter()
.append("g")
.attr("transform", function(d, i) { return "translate("+ (playerOffsetX) + "," + (i == 0 ? 0 : (rectY+rectGapY)) + ")"; })
.attr("class", "player");
player.append("rect")
.attr("width", rectX)
.attr("height", rectY)
.attr("class", "player");
player.append("text")
.attr("x", 3)
.attr("y", rectY / 2)
.attr("dy", ".35em")
.text(function(d) { return getPlayerByIdOrSomethingLikeThat(d); });// <-- THIS
[
{ source: {...}, target: {...} },
{ source: {...}, target: {...} },
{ source: {...}, target: {...} },
...
]