D3.js 区域占比图

简单的交互式区域平面地图

map

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2755
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// VARS
data = [
  {
    name: 'nw',
    percent: 20,
    coords: '576,605 576,535.3 426.5,397.7 323,301.6 288.9,269.3 275,254.2 224.1,140 8,140 8,250.8 358.3,605 ',
    color: '#1685a4',
    labelX: 86, 
    labelY: 124
  },
  {
    name: 'n',
    percent: 15,
    coords: '254.7,192.8 280.8,252.7 286.2,259 552.7,506.1 553,371.5 553.6,370.8 656.7,225.8 313.9,10.1 229.4,137.3',
    color: '#10a5d0',
    labelX: 135,
    labelY: 80
  }, 
  {
    name: 'ne',
    percent: 25,
    coords: '558.7,511.6 580.1,531 880,521 1107,531.9 1107,412.6 916.8,383.8 916.3,383.5 661.8,229 559,373.5',
    color: '#5dccf4',
    labelX: 240, 
    labelY: 132
  },   
  {
    name: 'se',
    percent: 19,
    coords: '1107,537.9 880,527 582,536.9 582,825 1107,827',
    color: '#9ed2e7',
    labelX: 250, 
    labelY: 210
  },
  {
   name: 'sw',
    percent: 21,
    coords: '360,611 360,912 576,912 576,611 468,611',
    color: '#29bae0',
    labelX: 140, 
    labelY: 235
  }
];

// THE MAP
var mapGraph = d3.select('#map').append('svg')
  .attr('width', 350)
  .attr('height', 300)
  .attr('viewbox', '0 0 1170 932');

var mapColor = d3.hsl(193, .86, .44);
function dColor(d) {
  return d3.hsl(193, d.percent * .9 , 1 - (d.percent / 33.5));
};

// DRAW THE MAP
var shapeGroup = mapGraph.append('g')
    .attr('transform', 'scale(.3) translate(0, 0)')
    .selectAll('polyline')
    .data(data)
    .enter()
    .append('polyline')
    .attr('class', 'map-shape')
    .attr('fill', '#fff')
    .on("mouseover", function(d, i) {
      mapOn(d, i);
    })
    .on("mouseout", function(d, i) {
      mapOut(d, i);
    })
    .transition()
      .delay(function(d, i) {
        return (i * 100) + 300;
      })
      .duration(function(d, i) {
        return (i * 100) + 300;
      })
      .ease('in-out')
    .attr('fill', function(d, i) {
      return dColor(d);
    })
    .attr('points', function(d, i) {
      return d.coords;
    })

// MAP LABELS
mapGraph.append('g').selectAll('text')
      .data(data)
      .enter()
      .append('text')
      .attr('class', 'map-label')
      .attr()
      .attr('text-anchor', "middle")
      .text(function(d) {
        return d.name;
      })
      .attr('transform', function(d, i) {
        return 'translate('+ d.labelX + ', ' + d.labelY + ')';
      });

// CIRCLE AROUND LABELS
var circles = mapGraph.selectAll('circle')
       .data(data)
      .enter()
      .append('circle')
      .attr("r", 17)
      .attr("stroke-width", 2)
      .style('fill', 'none')
      .attr("stroke", "#fff")
      .text(function(d) {
        return d.name;
      })
      .attr('transform', function(d, i) {
        return 'translate('+ d.labelX + ', ' + (d.labelY - 5) + ')';
      });

function mapOn(d, i) {
  d3.select(shapeGroup[0][i])
    .transition()
    .duration(140)
    .ease('in-out')
    .style('fill', '#003c4d');
  d3.select(circles[0][i])
    .transition()
    .duration(140)
    .ease('in-out')
    .attr('r', 19);
}

function mapOut(d, i) {
  d3.select(shapeGroup[0][i])
    .transition()
    .duration(140)
    .ease('in-out')
    .style('fill', function(d){
      return dColor(d);
    });
  d3.select(circles[0][i])
    .transition()
    .duration(140)
    .ease('in-out')
    .attr('r', 17);
}

// OUTER LABELS
var labels = d3.select('#labels')
  .selectAll('p')
    .data(data)
    .enter()
    .append('p')
    .attr('fill', 'black')
    .attr('class', 'label-text')    
    .on("mouseover", function(d, i) {
      mapOn(d, i);
      d3.select(this)
        .style('background-color', '#003c4d')
    })
    .on("mouseout", function(d, i) {
      mapOut(d, i);
      d3.select(this)
        .style('background-color', '#fff')
    });

// LABEL--COLORS
labels.append('span')
  .attr('class', 'color')
  .style('background-color', function(d) {
    return dColor(d);
  });

// LABEL--NAME
labels.append('span')
  .attr('class', 'name')
  .text(function(d, i) {
    return d.name;
  });

// LABEL--PERCENT
labels.append('span')
  .attr('class', 'percent')
  .text(function(d, i) {
    return ' ' + d.percent + '%';
});

编译

CSS

body{background: white;}
.map-label, .label-text {
  font-family: "brandon-grotesque", sans-serif; }

.container {
  padding: 30px 20px; }

#map {
  float: left; }

.map-label {
  fill: #fff;
  font-size: 14px;
  text-transform: uppercase; }

#labels {
  float: left;
  margin-right: 50px;
  width: 160px; }

.label-text {
  color: #00232b;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 34px;
  padding: 0 10px;
  margin: 0;
  text-transform: uppercase;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out; }

.label-text:hover {
  /* font-size: 19px; */
  color: #fff; }

.label-text .color {
  height: 19px;
  display: inline-block;
  margin-right: 3px;
  vertical-align: -4px;
  width: 19px; }

.label-text .name {
  display: inline-block;
  width: 30px; }

.label-text span.percent:before {
  border-bottom: 1px dotted #d6d6d6;
  content: '';
  display: inline-block;
  height: 1px;
  margin-right: 4px;
  vertical-align: 4px;
  width: 50px; }

HTML

简单的交互式区域平面地图

map

编辑器支持Emmet

快捷键

简单的交互式区域平面地图

map

HTML5 D3.js 树形结构动画示范（可绘制脑图）

D3.js 世界范围陨石降落地图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：