因此，我使用一些基本的CSS以大网格格式显示自己的animated square pie chart。但是，如何更改要在状态图网格中排列的每个单独的块（较大的正方形）/
我在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%
}
看起来你已经完成了将地理地图布局转换为行和列的困难部分;所以这就像将'row'和'col'值乘以块的宽度/高度一样简单，并将结果用作像素位置。
我将跳过代码中与问题无关的部分，并根据“field_details”对象将“块”绘制为单个元素：
var field_details = {
ME: {row: 0, col: 10}, WI: {row: 1, col: 5}, VT: {row: 1, col: 9}, NH: {row: 1, col: 10}, WA: {row: 2, col: 0}, ID: {row: 2, col: 1}, MT: {row: 2, col: 2}, ND: {row: 2, col: 3}, MN: {row: 2, col: 4}, IL: {row: 2, col: 5}, MI: {row: 2, col: 6}, NY: {row: 2, col: 8}, MA: {row: 2, col: 9}, OR: {row: 3, col: 0}, NV: {row: 3, col: 1}, WY: {row: 3, col: 2}, SD: {row: 3, col: 3}, IA: {row: 3, col: 4}, IN: {row: 3, col: 5}, OH: {row: 3, col: 6}, PA: {row: 3, col: 7}, NJ: {row: 3, col: 8}, CT: {row: 3, col: 9}, RI: {row: 3, col: 10}, CA: {row: 4, col: 0}, UT: {row: 4, col: 1}, CO: {row: 4, col: 2}, NE: {row: 4, col: 3}, MO: {row: 4, col: 4}, KY: {row: 4, col: 5}, WV: {row: 4, col: 6}, VA: {row: 4, col: 7}, MD: {row: 4, col: 8}, DE: {row: 4, col: 9}, AZ: {row: 5, col: 1}, NM: {row: 5, col: 2}, KS: {row: 5, col: 3}, AR: {row: 5, col: 4}, TN: {row: 5, col: 5}, NC: {row: 5, col: 6}, SC: {row: 5, col: 7}, OK: {row: 6, col: 3}, LA: {row: 6, col: 4}, MS: {row: 6, col: 5}, AL: {row: 6, col: 6}, GA: {row: 6, col: 7}, HI: {row: 7, col: 0}, AK: {row: 7, col: 1}, TX: {row: 7, col: 3}, FL: {row: 7, col: 8}
};
for (state in field_details) {
var data = field_details[state];
// create the element (yours probably already exist, so just access them by ID instead)
var newElement = $('<div class="block">'+state+'<div>');
$('#map').append(newElement);
// set the position (row times width, col times height plus a bit of padding). I hardcoded the sizes here out of laziness.
newElement.css("top",(data.row * 35) + "px");
newElement.css("left",(data.col * 35) + "px");
}#map {
position: relative;
width: 100%;
height: 100%
}
.block {
font-size: 10px;
width: 30px;
height: 30px;
border: 1px solid #000;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
</div>（因为它使用绝对定位，所以它不需要在严格的网格上;这只是你的行/列数据的结果。你可以通过稍微调整一些状态的位置来改善布局 - 例如将所有状态加倍数据中的行/列值乘以宽度/高度的一半可以让你向左或向右移动FL和TX半步，或者东北方向向南半步......
将此与现有代码绑定：
您已经在循环遍历field_details并创建DOM元素，就像我上面的示例一样。所以你大部分都在那里;只需添加定位即可：
valfields.forEach(function(v,i) {
// ...
var div = d3.select("#charts").append("div")
// ...
// New code: position the elements:
div.style("top",(/* math */) + "px");
div.style("left",(/* math */) + "px");
// (make sure those divs get a `position:absolute`, and #charts or some other containing element has `position:relative`
// ...
}
这些确切的行，取代现有的div.style行，在我的代码中适合我：
div.style("position", "absolute"); // or set this in CSS on .holder
div.style("top", field_details[v].row * 95 + "px");
div.style("left", field_details[v].col * 95 + "px");