D3和弦圖Google Chrome

Question

您好，我在使用D3和弦圖時遇到麻煩。 出於某種原因，它在IE和Firefox中運行完美，但是在chrome中，兩個連接和弦實際上可以交換顏色嗎？

有人知道為什么會這樣嗎？ 希望所有的幫助

我還嘗試擺脫了變色的和弦，而另一個變了色。 是否有一個原因可以解決？

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

這取決於和弦path元素在不同瀏覽器的DOM中出現的順序。

在FireFox（大概也在IE中）中，和弦在DOM中的繪制順序與原始數據中出現的順序相同。 第一個和弦路徑（來自Firebug）突出顯示如下：

Chrome與眾不同：重新排序兩個和弦path元素。 此處突出顯示了第一個和弦路徑（來自Chrome開發工具）：

從路徑數據中可以看到，這些路徑不是相同的。 我不確定為什么 Chrome會以這種不同（意外）的順序在DOM中呈現路徑！ 這會影響您的示例，您將使用：

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

在為每個和弦分配顏色之前選擇它。 選擇中路徑的順序基於它們在DOM中出現的順序，因此，為什么順序很重要。 我建議您將代碼重構為不需要兩次讀取data.csv （一次獲取和弦路徑的數據，然后再次為這些路徑分配顏色）。

更新

解決此問題的一種方法是在分配顏色之前對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