G6 - 美国 2010 CPI 数据

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>美国 2010 CPI 数据</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <style>
.legend{
  position: absolute;
  z-index: 4;
}
.size-legend circle{
  fill: #0078E6
}
#c1{
  position: relative;
}
</style>

<p><!-- d3.js --></p>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- d3-legend.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>

<script type="text/javascript">
$('#c1').append('<svg id="color-legend-container" class="legend"></svg>');
$('#c1').append('<svg id="size-legend-container" class="legend"></svg>');
$.getJSON('../../../static/data/us-cpi.json',function(data){
  var Util = G6.Util;
  var canvasHeight = 450;
  var graphCenterX = 250;
  var graphCenterY = canvasHeight/2;

  // 工具方法
  var formatterPersent = function(percent, digit){
    return percent.toFixed(digit) + ' %';
  };

  // 生成度量
  var trainScale = function(dim, scale){
    var max = -Infinity;
    var min = Infinity;
    data.nodes.map(function(node){
      if(node[dim] > max){
        max = node[dim];
      }
      if(node[dim] < min){
        min = node[dim];
      }
    });
    scale.domain([min, max]);
  };
  var colors = ['#007AE7', '#40BCD2', '#81D6C3', '#C1E4BC', '#FFDD9B', '#FEAC4C', '#FF7C01', '#C4201D'];
  var sizeScale = d3.scalePow().range([4, 20]).exponent(1/2);
  var colorScale = d3.scaleSequential(d3.interpolateRgbBasis(colors));
  trainScale('weight', sizeScale);
  trainScale('percentChange', colorScale);

  // 生成图
  var net = new G6.Net({
    id: 'c1',               // 容器ID
    height: canvasHeight,   // 画布高
    mode: 'analysis'
  });
  net.tooltip(true);
  net.node()
    .size(function(model){
      return sizeScale(model.weight)*2.2;
    })
    .color(function(model){
      return colorScale(model.percentChange);
    })
    .shape('circle')
    .style({
      stroke: '#666',
      strokeOpacity: 0.5,
      lineWidth: 1,
      fillOpacity: 1
    })
    .tooltip(function(model){
    return [
      ['类目', model.id],
      ['比重', formatterPersent(model.weight, 2)],
      ['波动', formatterPersent(model.percentChange, 2)]
    ]
  });
  net.source(data.nodes, data.edges);
  net.removeBehaviour(['dragCanvas', 'dragHideEdges', 'dragHideTexts']);
  net.addBehaviour(['dragBlank']);
  net.render();
  net.zoomAt(graphCenterX, graphCenterY, 0.5);

  // 生成布局
  var layoutNodes = data.nodes;
  var layoutEdges = Util.clone(data.edges);
  var ticked = function(){
    net.updateNodesPosition();
  };
  var forceStrength = -180;
  var simulation = d3.forceSimulation(layoutNodes)
  .force("link", d3.forceLink(layoutEdges).distance(20).strength(1).id(function(model) {
    return model.id;
  }))
  .force("charge", d3.forceManyBody().strength(forceStrength))
  .force("center", d3.forceCenter(graphCenterX, graphCenterY-20))
  .force("x", d3.forceX())
  .force("y", d3.forceY())
  .force('collide', d3.forceCollide(function(model){
    return sizeScale(model.weight)*2.2;
  }))
  .on("tick", ticked);

  // 生成颜色图例
  var svg = d3.select('#color-legend-container');
  svg.style('top', '270px');
  svg.style('left', '460px');
  svg.style('width', '170px');
  svg.style('height', '200px');
  svg.style('transform', 'scale(0.65, 0.65)');
  svg.append("g")
    .attr("class", "color-legend")
    .attr("transform", "translate(20,20)");

  var colorLegend = d3.legendColor()
    .cells(colors.length)
    .title('CPI')
    .labelFormat(function(v){
      return formatterPersent(v, 0);
    })
    .scale(colorScale);
  svg.select(".color-legend")
    .call(colorLegend);

  // 生成大小图例
  var svg = d3.select('#size-legend-container');
  svg.style('top', '80px');
  svg.style('left', '460px');
  svg.style('width', '170px');
  svg.style('height', '240px');
  svg.style('transform', 'scale(0.65, 0.65)');
  svg.append("g")
    .attr("class", "size-legend")
    .attr("transform", "translate(20,20)");

  var sizeLegend = d3.legendSize()
    .title('占总经济权重')
    .shape('circle')
    .shapePadding(7)
    .scale(sizeScale);
  svg.select(".size-legend")
    .call(sizeLegend);
});
</script>

      </body>
    </html>
          
美国 2010 CPI 数据
该图展示了 2012 年度，美国全国各商品CPI指数。节点大小映射了该品类交易额度占总交易额的比重，颜色映射了该品类CPI的指数。该示例主要向大家展示了如何使用 G6 结合优秀的第三方力导布局算法，高效的绘制动态力导图。