Question

我找到了这个优秀的和弦图表示例，可视化Über游乐设施：http://bost.ocks.org/mike/uberdata/

以下是使用的代码（完全可用于此处：https://github.com/sghall/d3-chord-diagrams）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #tooltip {
        color: white;
        opacity: .5;
        background: #333;
        padding: 5px;
        border: 10px solid lightgrey;
        border-radius: 5px;
        position: absolute;
        z-index: 10;
        visibility: hidden;
        white-space: nowrap;
        pointer-events: none;
      }
      #circle circle {
        fill: none;
        pointer-events: all;
      }
      path.group {
        fill-opacity: .;
      }
      path.chord {
        fill-opacity: .65;
        stroke: #000;
        stroke-width: .00000025px;
      }
      #circle:hover path.fade {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="tooltip"></div>
    <script src="lib/d3.js"></script>
    <script src="lib/queue.js"></script>
    <script src="lib/underscore.js"></script>
    <script src="js/mapper.js"></script>
    <script>
      //*******************************************************************
      //  CREATE MATRIX AND MAP
      //*******************************************************************
      queue()
        .defer(d3.json, 'data/EP-matrix.json')
        .defer(d3.csv, 'data/EP-cities.csv')
        .await(function(err, matrix, mmap) { 
          if (err) console.log(err);
          _.each(mmap, function (d, i) { d.id=i; d.data=d.color })
          drawChords(matrix, mmap);
        });
      //*******************************************************************
      //  DRAW THE CHORD DIAGRAM
      //*******************************************************************
      function drawChords (matrix, mmap) {
        var w = 1300, h = 1300, r1 = h / 2, r0 = r1 - 110;

        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") });

        g.append("svg:path")
            .style("stroke", "grey")
            .style("fill", function(d) { return rdr(d).gdata; })
            .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", "9px")
            .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", "grey")
                .style("fill", function(d) { return _.where(mmap, {id: d.source.index })[0].data;; })
                .attr("d", d3.svg.chord().radius(r0))
                .on("mouseover", function (d) {
                  d3.select("#tooltip")
                    .style("visibility", "visible")
                    .html(chordTip(rdr(d)))
                    .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 chordTip (d) {
            var p = d3.format(".1%"), q = d3.format(",.2r")
            return "Chord Info:<br/>"
              +  d.sname + " → " + d.tname
              + ": " + p(d.svalue) + "<br/>"
              + d.tname + " → " + d.sname
              + ": " + p(d.tvalue) + "<br/>";
          }

          function groupTip (d) {
            var p = d3.format(".1%"), q = d3.format(",.2r")
            return "Group Info:<br/>"
                + d.gname + " : " + p(d.gvalue) + "<br/>";
            }

          function mouseover(d, i) {
            d3.select("#tooltip")
              .style("visibility", "visible")
              .html(groupTip(rdr(d)))
              .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;
            });
          }
      }
    </script>
  </body>
</html>

这是它显示的内容：

现在，这代表一个有向图，其中任何给定和弦的颜色反映了边缘的原点颜色。

如果我想显示无向数据怎么办？有没有办法从原点和目的地混合两种颜色？或者更好的是，将和弦颜色从原点线性淡化到目的地？

在d3.js的和弦图中处理颜色

0 个答案: