D3 网格数据源代码展示

Document

body {

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

})

}