Javascript 需要d3.js逻辑来处理JSON数据

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],

我进入d3.js已经2天了,我已经建立了这个用于网球比赛的抽签结构

下面是我开始的数据-

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: {...} },
  ...
]