D3 Chord图Google

Question

你好，我的D3和弦图有问题。出于某种原因，它在IE和Firefox中工作得很完美，但是在两个连接的和弦中，它实际上可以交换颜色？

有人知道为什么会这样吗？会感谢你的帮助

我还试着去掉了和弦的颜色，而另一个和弦的和弦是颜色的。有什么理由让它停下来吗？

http://lkrawitz1.byethost3.com/viz/viz.html

//*******************************************************************
  //  CREATE MATRIX AND MAP
  //*******************************************************************
    var datas = []
d3.csv('data/data.csv', function (error, data) {
    var mpr = chordMpr(data);
datas = data;
    mpr
      .addValuesToMap('has')
      .setFilter(function (row, a, b) {
        return (row.has === a.name && row.prefers === b.name)
      })
      .setAccessor(function (recs, a, b) {
        if (!recs[0]) return 0;
        return +recs[0].count;
      });
    drawChords(mpr.getMatrix(), mpr.getMap());
  });
  //*******************************************************************
  //  DRAW THE CHORD DIAGRAM
  //*******************************************************************

function drawChords (matrix, mmap) {
    var w = 980, h = 800, r1 = h / 2, r0 = r1 - 100;
    var fill = d3.scale.ordinal()
        .domain([0])
        .range([""]);

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

    var arc = d3.svg.arc()
        .innerRadius(r0)
        .outerRadius(r0 + 20);

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

        svg.append("circle")
            .attr("r", r0 + 20);

    var rdr = chordRdr(matrix, mmap);
    chord.matrix(matrix);

 var g = svg.selectAll("g.group")
        .data(chord.groups())
      .enter().append("svg:g")
        .attr("class", "group")
        .on("mouseover", mouseover)
        .on("mouseout", function (d) { d3.select("#tooltip").style("visibility", "hidden") });


    d3.csv('data/outer_color.csv', function (error, data) {
            g.append("svg:path")
                .style("stroke", "black")
                .style("fill", function(d,i){return data[i].color})
                .attr("d", arc);
    });

    g.append("svg:text")
        .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
        .attr("dy", ".35em")
        .style("font-family", "helvetica, arial, sans-serif")
        .style("font-size", "10px")
        .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
        .attr("transform", function(d) {
          return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
              + "translate(" + (r0 + 26) + ")"
              + (d.angle > Math.PI ? "rotate(180)" : "");
        })
        .text(function(d) { return rdr(d).gname; });


      var chordPaths = svg.selectAll("path.chord")
            .data(chord.chords())
            .enter().append("svg:path")
            .attr("class", "chord")
            .style("stroke", function(d) { return d3.rgb(fill(d.target.index)).darker(); })
    .style("fill", function(d,i){return datas[i].color; })


            .attr("d", d3.svg.chord().radius(r0))
            .on("mouseover", function (d) {
              d3.select("#tooltip")
                .style("visibility", "visible")
                .style("top", function () { return (d3.event.pageY - 100)+"px"})
                .style("left", function () { return (d3.event.pageX - 100)+"px";})
            })
            .on("mouseout", function (d) { d3.select("#tooltip").style("visibility", "hidden") });

  function mouseover(d, i) {
        d3.select("#tooltip")
          .style("visibility", "hidden")
          .style("top", function () { return (d3.event.pageY - 80)+"px"})
          .style("left", function () { return (d3.event.pageX - 130)+"px";})

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

Answer 1

这取决于不同浏览器在DOM中显示chord path元素的顺序。

在FireFox中(大概也在IE中)，和弦在DOM中的绘制顺序与它们在原始数据中显示的顺序相同。第一个chord路径(来自Firebug)突出显示如下：

​

​

Chrome是不同的:它重新排序了两个chord path元素。第一个chord路径(来自Chrome工具)在这里突出显示：

​

​

从路径数据中可以看到，这些路径并不相同。我不知道为什么Chrome在DOM中以不同(意外)的顺序呈现路径！影响您的示例的地方是您使用：

svg.selectAll("path.chord")...

在分配颜色之前选择每个和弦。选择中路径的顺序是基于它们在DOM中出现的顺序，因此顺序很重要。我建议重构代码给您，不需要在两次中读取data.csv (一次是为了获取chord路径的数据，然后再一次只是为这些路径分配颜色)。

更新

解决此问题的一个解决方案是在指定颜色之前对chordPaths选择进行排序，例如在startAngle上。为此，请执行以下操作：

chordPaths = svg.selectAll("path.chord");
chordPaths.sort(function(a,b) {return a.source.startAngle - b.source.startAngle }) 
chordPaths.style("fill", ...

请参阅更新后的柱塞：http://plnkr.co/edit/xGKvEVeTLkZZLsTAiUFs?p=preview

关于selection.sort()的文档，请访问：https://github.com/mbostock/d3/wiki/Selections#sort