以下是我对热图的更新功能，该热图监视不同服务器上的不同数据库。 SchemaTables是它引用的模式的组合变量，以及它引用的模式中的表。该函数位于名为heatmap的字典中，该字典还包含其他函数。由于某种原因，当取走行时，y值轴会相应地修复自身，但是在添加行时会弹出几个错误，如以下代码和注释中所述：
update: function(usingFilter=false, schemaTableFilter=0) {
// get functions get most recent data
var data = getData(),
servers = getServers(),
schemaTables = getSchemaTables(),
//constants
gridSize = {height: 35, width: 140},
colors = ["#E50000", "#E45500", "#E3A900", "#C7E200", "#72E100", "#1DE00D", "#00E036"],
width = 460 + (gridSize.width * columns),
height = 400 + (gridSize.height * rows),
columns = servers.length,
rows = schemaTables.length;
//Fit HTML
$("html").height(height);
$("html").width(width);
$("svg").height(height);
$("svg").width(width);
var svg = d3.select("g");
//User has the option to use a filter, if a filter is
//used then weed out whatever shouldn't be shown.
if (usingFilter) {
schemaTables = schemaTableFilter;
data = getFilteredData($("#filters").val());
}
//x-axis labels - the amount of servers doesn't really change
//so as far as I know this works, but perhaps not
var serverLabels = svg.selectAll(".serverLabel")
.data(servers)
.text(function (d) { return d; })
.exit().remove()
.enter().append("text")
.attr("x", function(d, i) { return i * gridSize.width})
.attr("y", 0)
.attr("transform", "translate(" + gridSize.width / 2 + ", -6)")
.attr("class", "serverLabel mono")
//y-axis labels - where I'm having trouble
//It works when taking away rows but not when adding
var schemaTableLabels = svg.selectAll(".schemaTableLabel")
console.log(schemaTableLabels);
schemaTableLabels.data(schemaTables).text(function (d) { return d; })
.exit().remove()
.enter().append("text")
.attr("x", 50)
.attr("y", function (d, i) { return i * gridSize.height; })
.style("text-anchor", "end")
.attr("transform", "translate(-6," + gridSize.height / 1.5 + ")")
.attr("class", "schemaTableLabel mono")
//If removing rows no error occurs, if adding rows then
//I get an Uncaught RangeError: Invalid array length
var gridAmount = servers.length * schemaTables.length,
coordinates = Array(gridAmount).join(".").split(".");
//This for loop puts the data at the correct x, y coordinates
//within a list
for (var i = 0; i < data.length; i++) {
var serverIndex = servers.indexOf(data[i].server);
var schemaTableIndex = schemaTables.indexOf(data[i].schemaTable);
var index = (schemaTables.length * serverIndex) + (schemaTableIndex % schemaTables.length)
var currentData = data[i];
coordinates[index] = currentData;
}
//This for loop makes sure each index has an x, y
//coordinate to follow
for (var j = 0; j < coordinates.length; j++) {
currentGrid = coordinates[j];
if (currentGrid == "") {
currentGrid = {};
}
var xvalue = Math.floor(j / schemaTables.length);
var yvalue = Math.floor(j % schemaTables.length)
currentGrid["x"] = xvalue;
currentGrid["y"] = yvalue;
coordinates[j] = currentGrid;
}
//updates each rectangle for the heatmap
var grid = svg.selectAll("rect")
.data(coordinates, function(d) { return d; })
//remove old grids and add new ones, this function works
//when removing and adding grids
grid.exit().remove();
grid.enter().append("rect")
.attr("x", function(d, i) { return d.x * gridSize.width })
.attr("y", function(d, i) { return d.y * gridSize.height})
.attr("rx", 8)
.attr("ry", 8)
.attr("transform", "translate(50, 10)")
.attr("class", "server bordered")
.attr("width", gridSize.width)
.attr("height", gridSize.height)
.transition().duration(0)
.style("fill", function(d, i) {
var medianRefresh;
var color;
if (!d.hasOwnProperty("data")) {
medianRefresh = undefined;
}
else {
medianRefresh = d.data.medianrefresh;
}
if (medianRefresh == 0) {
color = colors[6];
}
else if (medianRefresh == null || medianRefresh == undefined) {
color = "white"
}
else if (medianRefresh > 0 && medianRefresh <= 300) {
color = colors[5];
}
else if (medianRefresh > 300 && medianRefresh <= 600) {
color = colors[4];
}
else if (medianRefresh > 600 && medianRefresh <= 900) {
color = colors[3];
}
else if (medianRefresh > 900 && medianRefresh <= 400) {
color = colors[2];
}
else if (medianRefresh > 400 && medianRefresh <= 500) {
color = colors[1];
}
else if (medianRefresh > 500) {
color = colors[0];
}
return color;
})
//Update titles within rectangles
svg.select("rect").selectAll("title").remove();
var title = svg.selectAll("rect")
.append("title")
.text(function(d) {
var medianRefresh,
server,
schemaTable,
schema,
table;
if (!d.hasOwnProperty("data")) {
medianRefresh = undefined;
server = servers[d.x];
schema = schemaTables[d.y].split(".")[0];
table = schemaTables[d.y].split(".")[1];
}
else {
medianRefresh = d.data.medianrefresh;
server = d.server;
schemaTable = d.schemaTable;
schema = schemaTable.split(".")[0];
table = schemaTable.split(".")[1];
}
var result = "Median Refresh: " + medianRefresh + "\nServer: " + server + "\nSchema: " + schema + "\nTable: " + table;
return result
})
我是d3.js的新手，所以任何提示都会有所帮助。这是我调用更新函数的代码：
$("#filters").on("select2:select", function() {
var filter = $("#filters option:selected").text();
if (filter != "") {
var filterInfo = getFilterInfo(filter)
filter = true;
heatmap.update(filter, filterInfo)
}
else {
heatmap.update();
}
})
问题更新： 我在这里解决了我的问题是固定代码：
//x-axis labels
var serverLabels = svg.selectAll(".serverLabel")
.data(servers)
serverLabels.enter().append("text")
.attr("class", "serverLabel mono")
.attr("x", function(d, i) { return i * gridSize.width; }).attr("y", 0)
.attr("transform", "translate(" + gridSize.width / 2 + ", -6)")
.attr("class", "serverLabel mono")
.merge(serverLabels)
.text(function (d) { return d; })
serverLabels.exit().remove();
//y-axis labels
var schemaTableLabels = svg.selectAll(".schemaTableLabel")
.data(schemaTables);
schemaTableLabels.enter().append("text")
.attr("class", "schemaLabel mono")
.attr("x", 50).attr("y", function(d, i) { return i * gridSize.height; })
.style("text-anchor", "end")
.attr("transform", "translate(-6," + gridSize.height / 1.5 + ")")
.attr("class", "schemaTableLabel mono")
.merge(schemaTableLabels)
.text(function(d) { return d; })
schemaTableLabels.exit().remove();