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）突出显示如下：

chord element in FireFox

Chrome与众不同：它重新排序了两个和弦path元素。第一个和弦路径（来自Chrome开发工具）在此处突出显示：

enter image description here

从路径数据中可以看出，这些路径并不相同。我不确定为什么 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", ...

请参阅此更新的plunker：http://plnkr.co/edit/xGKvEVeTLkZZLsTAiUFs?p=preview

selection.sort()上的文档：https://github.com/mbostock/d3/wiki/Selections#sort

D3 Chord Diagram谷歌Chrome

1 个答案: