问在mhtml5 svg中绘制球体

EN

var width = 500, height = width, 
    projection, path,
    svg, features, graticule;

projection = d3.geo.orthographic()
    .translate([width / 2, height / 2])
    .scale(250)
    .clipAngle(90)
    .precision(0.1)
    .rotate([0, -30]);

path = d3.geo.path()
    .projection(projection);

svg = d3.select('.globe')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .attr('viewBox', '0, 0, ' + width + ', ' + height);

features = svg.append('g');

features.append('path')
    .datum({type: 'Sphere'})
    .attr('class', 'background')
    .attr('d', path);

graticule = d3.geo.graticule();

features.append('path')
  .datum(graticule)
  .attr('class', 'graticule')
  .attr('d', path);

svg {
    width: 100%
}

path {
    fill: none;
    stroke: black
}

.background {
  fill: rgba(200,212,220,.5);
  stroke-width: .8px;
  stroke: black;
}

.graticule {
    stroke: rgba(0,0,0, .2);
    stroke-width: .5px;
}

.country {
    cursor: pointer;
}

.country .land, .state .land {
    fill: white;
    stroke: rgba(0,0,0, .2);
    stroke-width .3px;
}

.state .overlay {
    fill: blue;
    fill-opacity: 0;
}

.country .overlay {
    fill: orange;
    fill-opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div class="globe"></div>