对于Chord Diagram，将d3 v2迁移到d3 v4

Question

我正在使用this example来指导我使用d3进入和弦图。我在v2中使用了我的数据（示例所在的版本），现在我正在尝试升级到v4。

以下是适用于v2的代码：

<script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
<script>

var width = 900,
    height = 900,
    outerRadius = Math.min(width, height) / 2 - 10,
    innerRadius = outerRadius - 24;

var formatPercent = d3.format(",.0f");

var arc = d3.svg.arc()
            .innerRadius(innerRadius)
                        .outerRadius(outerRadius);

var layout = d3.layout.chord()
                             .padding(.02)
                             .sortSubgroups(d3.descending)
                             .sortChords(d3.ascending);

var path = d3.svg.chord()
                         .radius(innerRadius);

var svg = d3.select("body").append("svg")
                      .attr("width", width)
                        .attr("height", height)
                        .append("g")
                        .attr("id", "circle")
                        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("circle")
     .attr("r", outerRadius);

d3.csv("teams.csv", function(cities) {
d3.json("matrix.json", function(matrix) {

// Compute the chord layout.
layout.matrix(matrix);

// Add a group per neighborhood.
var group = svg.selectAll(".group")
                           .data(layout.groups)
                             .enter().append("g")
                             .attr("class", "group")
                             .on("mouseover", mouseover);

// Add a mouseover title.
group.append("title").text(function(d, i) {
return cities[i].name + ": " + formatPercent(d.value) + " as business unit";
});

// Add the group arc.
var groupPath = group.append("path")
                                         .attr("id", function(d, i) { return "group" + i; })
                                         .attr("d", arc)
                     .style("fill", function(d, i) { return cities[i].color; });

// Add the chords.
var chord = svg.selectAll(".chord")
                             .data(layout.chords)
               .enter().append("path")
               .attr("class", "chord")
               .style("fill", function(d) { return cities[d.source.index].color; })
               .attr("d", path);

// Add an elaborate mouseover title for each chord.
 chord.append("title").text(function(d) {
 return cities[d.source.index].name
 + " → " + cities[d.target.index].name
 + ": " + formatPercent(d.source.value)
 + "\n" + cities[d.target.index].name
 + " → " + cities[d.source.index].name
 + ": " + formatPercent(d.target.value);
 });

function mouseover(d, i) {
chord.classed("fade", function(p) {
return p.source.index != i
&& p.target.index != i;
});
}
});
});

</script>

在我尝试迁移到v4的过程中，这是相同的代码：

<script src="http://d3js.org/d3.v4.min.js"></script>
<script>

var width = 900,
height = 900,
outerRadius = Math.min(width, height) / 2 - 10,
innerRadius = outerRadius - 24;

var formatPercent = d3.format(",.0f");

var arc = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);

var layout = d3.chord()
                             .padAngle(.02)
                             .sortSubgroups(d3.descending)
                             .sortChords(d3.ascending);

var path = d3.ribbon()
             .radius(innerRadius);

var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("id", "circle")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("circle")
   .attr("r", outerRadius);

d3.csv("teams.csv", function(cities) {
d3.json("matrix.json", function(matrix) {

// Compute the chord layout.
layout.matrix(matrix);

// Add a group per neighborhood.
var group = svg.selectAll(".group")
               .data(layout.groups)
               .enter().append("g")
               .attr("class", "group")
               .on("mouseover", mouseover);

// Add a mouseover title.
group.append("title").text(function(d, i) {
return cities[i].name + ": " + formatPercent(d.value) + " as business unit";
});

// Add the group arc.
var groupPath = group.append("path")
                     .attr("id", function(d, i) { return "group" + i; })
                     .attr("d", arc)
                     .style("fill", function(d, i) { return cities[i].color; });

// Add the chords.
var chord = svg.selectAll(".chord")
               .data(layout.chords)
               .enter().append("path")
               .attr("class", "chord")
               .style("fill", function(d) { return cities[d.source.index].color; })
               .attr("d", path);

// Add an elaborate mouseover title for each chord.
 chord.append("title").text(function(d) {
 return cities[d.source.index].name
 + " → " + cities[d.target.index].name
 + ": " + formatPercent(d.source.value)
 + "\n" + cities[d.target.index].name
 + " → " + cities[d.source.index].name
 + ": " + formatPercent(d.target.value);
 });

function mouseover(d, i) {
chord.classed("fade", function(p) {
return p.source.index != i
&& p.target.index != i;
});
}
});
});

</script>

到目前为止，我已将命名空间（最多为d3.csv），将padding更改为padAngle，并将var path = d3.chord()更改为var path = d3.ribbon() 。当我进行每项更改时，我正在检查Chrome Developer中的错误消息。进行这些更改后，当前错误为layout.matrix is not a function。这是有道理的，基于v4标准。为了解决这个问题，我尝试将.data(layout.matrix)添加到var svg创建中。我尝试了从其他和弦图例子中收集到的其他一些路线，但没有用。

我应该如何访问和绑定v4中的数据？

修改：我添加了.data(layout(matrix))，现在正在创建g元素class=group。但是，此错误正在发生：attribute d: Expected number, "MNaN,NaNLNaN,NaNZ".因此，我认为这意味着该位置未正确填充。

编辑＃2：现在除了周围的酒吧外，我已经得到了所有东西。这是我目前的代码。我相信d组中path元素的g属性是错误的。它们设置为与path组之外的g元素相同。当我尝试将它们设置为arc而不是.attr("d", arc时，会出现错误attribute d: Expected number, "MNaN,NaNLNaN,NaNZ".。

<script>

var width = 900,
    height = 900,
    outerRadius = Math.min(width, height) / 2 - 10,
    innerRadius = outerRadius - 24;

var formatPercent = d3.format(",.0f");

var arc = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);

var layout = d3.chord()
                             .padAngle(.02)
                             .sortSubgroups(d3.descending)
                             .sortChords(d3.ascending);

var ribbon = d3.ribbon()
             .radius(innerRadius);

var svg = d3.select("body")
            .append("svg")
              .attr("width", width)
              .attr("height", height)
            .append("g")
              .attr("id", "circle")
              .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

svg.append("circle")
     .attr("r", outerRadius);

d3.csv("teams.csv", function(cities) {
d3.json("matrix.json", function(matrix) {

// Add a group per neighborhood.
var group = svg.selectAll(".group")
               .data(layout(matrix))
               .enter()
               .append("g")
                 .attr("class", "group");

// Add the group arc.
var groupRibbon = group.append("path")
                     .attr("id", function(d, i) { return "group" + i; })
                     .attr("d", ribbon)
                     //.style("fill", function(d, i) { return cities[i].color; })
                     ;

// Add the chords.
var chord = svg.selectAll(".chord")
               .data(layout(matrix))
               .enter().append("path")
               .attr("class", "chord")
               .style("fill", function(d) { return cities[d.source.index].color; })
               .attr("d", ribbon);
});
});

</script>