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")...

到 select 每个和弦，然后再为其分配颜色。 selection 中路径的顺序基于它们在 DOM 中出现的顺序，因此顺序很重要。我建议重构代码，这样你就不需要阅读 data.csv 两次（一次是获取和弦路径的数据，然后再次只是将颜色分配给这些路径）。

更新

此问题的一个解决方案是在分配颜色之前对 chordPaths select 离子进行排序，例如 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

D3 和弦图 Google Chrome

D3 Chord Diagram Google Chrome

javascript

visualization

google-chrome

d3.js

D3 和​​弦图 Google Chrome

D3 Chord Diagram Google Chrome

javascript

visualization

google-chrome

d3.js

D3 和弦图 Google Chrome