D3 网格数据源代码展示
Documentbody {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.d3 {
width: 500px;
height: 500px;
z-index: 10;
/* background-color: rosybrown; */
}
#zhemu {
width: 600px;
height: 100%;
opacity: .9;
background-color: black;
position: absolute;
z-index: 10;
}
//软件配置信息地址,软件安装完成之后使用本地地址,如:http://localhost:9000
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图,并设置地图的ID号为 bigemap.googlemap-streets,ID号程序自动生成,无需手动配置,并设置地图的投影为百度地图 ,中心点,默认的级别和显示级别控件
var map = BM.map('map', 'bigemap.googlemap-streets', { center: [30, 104], zoom: 4, zoomControl: true });
var marker = BM.marker([30, 104]).addTo(map)
getdata()
// 获取数据
function getdata() {
$.get('/Public/d3json/flare-2.json', function (data) {
var height = 700
var width = 600
console.log(data);
//处理数据
treemap = data => d3.treemap()
.size([width, height])
.padding(1)
.round(true)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
//定义格式化
format = d3.format(",d")
//颜色比例尺
color = d3.scaleOrdinal(d3.schemeCategory10)
var root = treemap(data);
//添加svg图层
var svg = d3.select('.d3').append('svg').attr('height', height).attr('width', width)
//添加图层分组
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
leaf.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`);
leaf.append("rect")
// .attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
leaf.append("clipPath")
// .attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
// .attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value)))
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
// .attr('font-size', '5')
.text(d => d);
})
}