所以我制作了一个动画方形饼图，它使用一些基本的 CSS 以大网格格式显示自己。但是，如何更改每个单独的块（较大的方块）以排列在状态地图网格中？
我在 javascript 中有以下代码，我认为这将允许我通过 CSS 重新组织它们，并且我知道我需要“将坐标转换为以像素为单位的 CSS 固定定位”，但我不确定如何将两者连接起来。
<script id="field_details">
var field_details = {
"ME" : { "state": "ME", "row": 0, "col": 10 },
"WI" : { "state": "WI", "row": 1, "col": 5 },
"VT" : { "state": "VT", "row": 1, "col": 9 },
"NH" : { "state": "NH", "row": 1, "col": 10 },
"WA" : { "state": "WA", "row": 2, "col": 0 },
"ID" : { "state": "ID", "row": 2, "col": 1 },
"MT" : { "state": "MT", "row": 2, "col": 2 },
"ND" : { "state": "ND", "row": 2, "col": 3 },
...
我看到的问题是下面的代码中已经调用了“field_details”。它接收数据集，从状态数据中创建一个 100 单位的小网格，并将其显示在画布上。
d3.csv("data/test3.csv", type, function(error, data) {
if (error) throw error;
var valfields = d3.keys(field_details);
// Make data accessible by grp key
data.forEach(function(o) {
grp_vals["grp" + o.agegrp] = o;
});
//
// Setup grid.
//
var cells = [];
d3.select("#grid").text().split("\n").forEach(function(line, i) {
//replace every alphanumeric character with an empty string
var re = /\w+/g, m;
while (m = re.exec(line)) cells.push({
name: m[0],
selected: 1,
x: m.index / 3,
y: i
});
});
//
// Make a square pie for each field.
//
valfields.forEach(function(v,i) {
var grid_width = d3.max(cells, function(d) { return d.x; }) + 1,
grid_height = d3.max(cells, function(d) { return d.y; }) + 1,
cell_size = width / grid_width,
holder_width = width + margin.left + margin.right;
var div = d3.select("#charts").append("div")
.attr("id", "holder"+v)
.attr("class", "chartholder")
div.append("h3").html(field_details[v].desc );
所有代码都位于链接中，包括 CSS。
感谢您的任何帮助/指导！
更新 2
HTML
</style>
</head>
<div id="main-wrapper">
<h1 class="centered">Test</h1>
<p class="desc centered">Test</p>
<div id="update">
<div id="update">
<div class="clr"></div>
</div>
<div id="agegrp" class="buttons">
<h3>Test</h3>
<div a href="#" data-toggle="tooltip" data-placement="bottom"
data-trigger="hover focus" title ="Test"
class="button current test" data-val="1" id = "HE" name = "HE"
value = "HE">Test</div>
<div a href="#" data-toggle="tooltip" data-placement="bottom"
data-trigger="hover focus" title ="Test"
class="button 2 test" data-val="2" id = "GM" name = "GM" value =
"GM">Test</div>
<div a href="#" data-toggle="tooltip" data-placement="bottom"
data-trigger="hover focus" title = "Test"
class="button 3 test" data-val="3" id = "RC" name = "RC"
value = "RC">Test</div>
<div a href="#" data-toggle="tooltip" data-placement="bottom"
data-trigger="hover focus" title = "Test"
class="button 4 test" data-val="4" style="margin-right:0" id =
"CAPS" name = "CAPS" value ="CAPS">Test</div>
<div class="clr"></div>
<div id="map" style="position:absolute" class="block"></div>
</div>
<div id="racesimp" class="buttons">
</div>
</div><!-- @end #update -->
<div class="clr"></div>
<div class="genericholder">
<div id="charts" style="position:relative"></div>
<div id="grid2"></div>
</div>
<div id="container">
</div>
Javascript
var valfields = d3.keys(field_details);
// Make data accessible by grp key
data.forEach(function(o) {
grp_vals["grp" + o.agegrp] = o;
});
//
// Setup grid.
//
var cells = [];
d3.select("#grid").text().split("\n").forEach(function(line, i) {
//replace every alphanumeric character with an empty string
var re = /\w+/g, m;
while (m = re.exec(line)) cells.push({
name: m[0],
selected: 1,
x: m.index / 3,
y: i
});
});
//
// Make a square pie for each field.
//
valfields.forEach(function(v,i) {
var grid_width = d3.max(cells, function(d) { return d.x; }) + 1,
grid_height = d3.max(cells, function(d) { return d.y; }) + 1,
cell_size = width / grid_width,
holder_width = width + margin.left + margin.right;
var div = d3.select("#charts").append("div")
.attr("id", "holder"+v)
.attr("class", "chartholder")
div.style("top",(data.row * 35) + "px");
div.style("left",(data.col * 35) + "px");
div.append("h3").html(field_details[v].desc );
CSS
#charts {
position: relative;
margin-top: 20px;
width: 100%;
}
#map {
position: relative;
width: 100%;
height: 100%
}
.div.css {
position: absolute;
width: 100%;
height: 100%
}
.newdiv {
position: absolute;
width: 100%;
height: 100%
}
.block {
position: absolute;
width: 100%;
height: 100%
}