我试图在每个新的一周在热图的顶部添加一个新行。最终发生的事情如下图所示。
刻度正确更新。但由于某种原因y()在更新热函数中updateHeatOnEvent()——生成下一个最小的行号赋值*模拟的周数，去掉最小的。这最终将行堆叠在一起，从顶部开始，直到所有行都如图所示并且不再变化，即使使用生成的 rand 数据Math.rand()来模拟 z 的变化。
请记住，不会添加任何新行。
图片发生在 10 个模拟周过去后。
我已经尝试过输入/合并/退出的每种组合| 追加/加入我可以想出，足够我没有在这里包括它们。也许我不正确地使用它们？在这种情况下，您将如何正确使用它们？
唯一有效的是生成新rect的，删除所有旧的，并通过添加新的.join()
我错过了什么？？？
var chart = chart || {}
var num = 21
const heatmargin = { top: 80, right: 60, bottom: 30, left: 40 },
heatwidth = 400 - heatmargin.left - heatmargin.right,
heatheight = 400 - heatmargin.top - heatmargin.bottom
function updateHeatOnEvent() {
d3.json(
'http://localhost:4000/api/heat/' + (75 + ((Math.floor((num / 21) / 7)) * 7))
).then(function (data) {
let dataset = data.data
dataset.forEach(d => d.z = Math.floor(d.z * (1 + Math.random()))) // for rand data
const myGroups = Array.from(new Set(dataset.map((d) => d.x)))
const myVars = Array.from(new Set(dataset.map((d) => d.y)))
let yAxis = d3.selectAll('.heatY')
var y = d3.scaleBand().range([heatheight, 0]).domain(myVars).padding(0.05)
yAxis
.transition()
.duration(1000)
.style('font-size', 15)
.call(d3.axisLeft(y).tickSize(0))
yAxis.select('.domain')
.remove()
// Build X scales and axis:
const x = d3
.scaleBand()
.range([0, heatwidth])
.domain(myGroups)
.padding(0.05)
const myColor = d3
.scaleLinear()
.domain([0, 140000, 179991])
.range(['green', 'orange', 'red'])
let oldNodes = d3.selectAll('.square').data(dataset, (d) => d.x + ':' + d.y)
//let test = d3.select('#innerHeatSVG').selectAll().data(dataset, (d) => d.x + ':' + d.y).join('rect')
//document.querySelectorAll(".square").forEach(e => e.remove());
oldNodes.transition()
.duration(1000)
.attr('x', (d) => x(d.x))
.attr('y', (d) => y(d.y))
.attr('rx', 4)
.attr('ry', 4)
.attr('width', x.bandwidth())
.attr('height', y.bandwidth())
.attr('class', 'square')
.style('fill', function (d) {
return myColor(d.z)
})
})
}
chart.heatmap = function () {
// append the svg object to the body of the page
const svg = d3
.select('#heat')
.style('padding-bottom', `${100}px`)
//.attr("padding-bottom", 100)
.append('svg')
.attr("id", "heatSVG")
.attr('preserveAspectRatio', 'xMinYMin meet')
.attr(
'viewBox',
`0 0 ${heatwidth + heatmargin.left + heatmargin.right} ${heatheight + heatmargin.top + heatmargin.bottom
}`
)
.append('g')
.attr("id", "innerHeatSVG")
.attr('transform', `translate(${heatmargin.left}, ${heatmargin.top})`)
//Read the data
d3.json('http://localhost:4000/api/heat/75').then(function (data) {
let dataset = data.data
// Labels of row and columns -> unique identifier of the column called 'group' and 'variable'
const myGroups = Array.from(new Set(dataset.map((d) => d.x)))
const myVars = Array.from(new Set(dataset.map((d) => d.y)))
// Build X scales and axis:
const x = d3
.scaleBand()
.range([0, heatwidth])
.domain(myGroups)
.padding(0.05)
svg
.append('g')
.attr("class", "heatX")
.style('font-size', 15)
.attr('transform', `translate(0, ${heatheight})`)
.call(d3.axisBottom(x).tickSize(0))
.select('.domain')
.remove()
// Build Y scales and axis:
const y = d3.scaleBand().range([heatheight, 0]).domain(myVars).padding(0.05)
svg
.append('g')
.attr("class", "heatY")
.style('font-size', 15)
.call(d3.axisLeft(y).tickSize(0))
.select('.domain')
.remove()
// Build color scale
const myColor = d3
.scaleSequential()
.interpolator(d3.interpolatePurples)
.domain([10000, 100000])
// add the squares
svg
.selectAll()
.data(dataset, (d) => d.x + ':' + d.y)
.join('rect')
.attr('x', (d) => x(d.x))
.attr('y', (d) => y(d.y))
.attr('rx', 4)
.attr('ry', 4)
.attr('width', x.bandwidth())
.attr('height', y.bandwidth())
.style('fill', (d) => myColor(d.z))
.style('stroke-width', 4)
.style('stroke', 'none')
.style('opacity', 0.8)
.attr('class', 'square')
.on('mouseover', showTooltip)
.on('mousemove', moveTooltip)
.on('mouseleave', hideTooltip)
})
}
chart.heatmap()
setInterval(function () {
updatesOnEvent()
num += 21
}, 3000)
function updatesOnEvent() {
updateHeatOnEvent()
}
设置 1：
{"data":[{"id":6,"x":"Sun","y":"Jan 06","z":39343},{"id":7,"x":"Mon","y":"Jan 06","z":44061},{"id":8,"x":"Tue","y":"Jan 06","z":88230},{"id":9,"x":"Wed","y":"Jan 06","z":10095},{"id":10,"x":"Thu","y":"Jan 06","z":70881},{"id":11,"x":"Fri","y":"Jan 06","z":50683},{"id":12,"x":"Sat","y":"Jan 06","z":50050},{"id":13,"x":"Sun","y":"Jan 13","z":41717},{"id":14,"x":"Mon","y":"Jan 13","z":90184},{"id":15,"x":"Tue","y":"Jan 13","z":95288},{"id":16,"x":"Wed","y":"Jan 13","z":17733},{"id":17,"x":"Thu","y":"Jan 13","z":77363},{"id":18,"x":"Fri","y":"Jan 13","z":91705},{"id":19,"x":"Sat","y":"Jan 13","z":12909},{"id":20,"x":"Sun","y":"Jan 20","z":37412},{"id":21,"x":"Mon","y":"Jan 20","z":47533},{"id":22,"x":"Tue","y":"Jan 20","z":14505},{"id":23,"x":"Wed","y":"Jan 20","z":37005},{"id":24,"x":"Thu","y":"Jan 20","z":9192},{"id":25,"x":"Fri","y":"Jan 20","z":97617},{"id":26,"x":"Sat","y":"Jan 20","z":77287},{"id":27,"x":"Sun","y":"Jan 27","z":58184},{"id":28,"x":"Mon","y":"Jan 27","z":76495},{"id":29,"x":"Tue","y":"Jan 27","z":15483},{"id":30,"x":"Wed","y":"Jan 27","z":15506},{"id":31,"x":"Thu","y":"Jan 27","z":59376},{"id":32,"x":"Fri","y":"Jan 27","z":40922},{"id":33,"x":"Sat","y":"Jan 27","z":80935},{"id":34,"x":"Sun","y":"Feb 03","z":85170},{"id":35,"x":"Mon","y":"Feb 03","z":62618},{"id":36,"x":"Tue","y":"Feb 03","z":42706},{"id":37,"x":"Wed","y":"Feb 03","z":35591},{"id":38,"x":"Thu","y":"Feb 03","z":20432},{"id":39,"x":"Fri","y":"Feb 03","z":14757},{"id":40,"x":"Sat","y":"Feb 03","z":17043},{"id":41,"x":"Sun","y":"Feb 10","z":60450},{"id":42,"x":"Mon","y":"Feb 10","z":33571},{"id":43,"x":"Tue","y":"Feb 10","z":72124},{"id":44,"x":"Wed","y":"Feb 10","z":65037},{"id":45,"x":"Thu","y":"Feb 10","z":83334},{"id":46,"x":"Fri","y":"Feb 10","z":48881},{"id":47,"x":"Sat","y":"Feb 10","z":88950},{"id":48,"x":"Sun","y":"Feb 17","z":65482},{"id":49,"x":"Mon","y":"Feb 17","z":15120},{"id":50,"x":"Tue","y":"Feb 17","z":68620},{"id":51,"x":"Wed","y":"Feb 17","z":61287},{"id":52,"x":"Thu","y":"Feb 17","z":51870},{"id":53,"x":"Fri","y":"Feb 17","z":62841},{"id":54,"x":"Sat","y":"Feb 17","z":83644},{"id":55,"x":"Sun","y":"Feb 24","z":18993},{"id":56,"x":"Mon","y":"Feb 24","z":72740},{"id":57,"x":"Tue","y":"Feb 24","z":27468},{"id":58,"x":"Wed","y":"Feb 24","z":12437},{"id":59,"x":"Thu","y":"Feb 24","z":18607},{"id":60,"x":"Fri","y":"Feb 24","z":93430},{"id":61,"x":"Sat","y":"Feb 24","z":63274},{"id":62,"x":"Sun","y":"Mar 03","z":75603},{"id":63,"x":"Mon","y":"Mar 03","z":71608},{"id":64,"x":"Tue","y":"Mar 03","z":12459},{"id":65,"x":"Wed","y":"Mar 03","z":44744},{"id":66,"x":"Thu","y":"Mar 03","z":23927},{"id":67,"x":"Fri","y":"Mar 03","z":46439},{"id":68,"x":"Sat","y":"Mar 03","z":25802},{"id":69,"x":"Sun","y":"Mar 10","z":92834},{"id":70,"x":"Mon","y":"Mar 10","z":34051},{"id":71,"x":"Tue","y":"Mar 10","z":41145},{"id":72,"x":"Wed","y":"Mar 10","z":10369},{"id":73,"x":"Thu","y":"Mar 10","z":58411},{"id":74,"x":"Fri","y":"Mar 10","z":38489},{"id":75,"x":"Sat","y":"Mar 10","z":72631}]}
设置 2：
{"data":[{"id":13,"x":"Sun","y":"Jan 13","z":41717},{"id":14,"x":"Mon","y":"Jan 13","z":90184},{"id":15,"x":"Tue","y":"Jan 13","z":95288},{"id":16,"x":"Wed","y":"Jan 13","z":17733},{"id":17,"x":"Thu","y":"Jan 13","z":77363},{"id":18,"x":"Fri","y":"Jan 13","z":91705},{"id":19,"x":"Sat","y":"Jan 13","z":12909},{"id":20,"x":"Sun","y":"Jan 20","z":37412},{"id":21,"x":"Mon","y":"Jan 20","z":47533},{"id":22,"x":"Tue","y":"Jan 20","z":14505},{"id":23,"x":"Wed","y":"Jan 20","z":37005},{"id":24,"x":"Thu","y":"Jan 20","z":9192},{"id":25,"x":"Fri","y":"Jan 20","z":97617},{"id":26,"x":"Sat","y":"Jan 20","z":77287},{"id":27,"x":"Sun","y":"Jan 27","z":58184},{"id":28,"x":"Mon","y":"Jan 27","z":76495},{"id":29,"x":"Tue","y":"Jan 27","z":15483},{"id":30,"x":"Wed","y":"Jan 27","z":15506},{"id":31,"x":"Thu","y":"Jan 27","z":59376},{"id":32,"x":"Fri","y":"Jan 27","z":40922},{"id":33,"x":"Sat","y":"Jan 27","z":80935},{"id":34,"x":"Sun","y":"Feb 03","z":85170},{"id":35,"x":"Mon","y":"Feb 03","z":62618},{"id":36,"x":"Tue","y":"Feb 03","z":42706},{"id":37,"x":"Wed","y":"Feb 03","z":35591},{"id":38,"x":"Thu","y":"Feb 03","z":20432},{"id":39,"x":"Fri","y":"Feb 03","z":14757},{"id":40,"x":"Sat","y":"Feb 03","z":17043},{"id":41,"x":"Sun","y":"Feb 10","z":60450},{"id":42,"x":"Mon","y":"Feb 10","z":33571},{"id":43,"x":"Tue","y":"Feb 10","z":72124},{"id":44,"x":"Wed","y":"Feb 10","z":65037},{"id":45,"x":"Thu","y":"Feb 10","z":83334},{"id":46,"x":"Fri","y":"Feb 10","z":48881},{"id":47,"x":"Sat","y":"Feb 10","z":88950},{"id":48,"x":"Sun","y":"Feb 17","z":65482},{"id":49,"x":"Mon","y":"Feb 17","z":15120},{"id":50,"x":"Tue","y":"Feb 17","z":68620},{"id":51,"x":"Wed","y":"Feb 17","z":61287},{"id":52,"x":"Thu","y":"Feb 17","z":51870},{"id":53,"x":"Fri","y":"Feb 17","z":62841},{"id":54,"x":"Sat","y":"Feb 17","z":83644},{"id":55,"x":"Sun","y":"Feb 24","z":18993},{"id":56,"x":"Mon","y":"Feb 24","z":72740},{"id":57,"x":"Tue","y":"Feb 24","z":27468},{"id":58,"x":"Wed","y":"Feb 24","z":12437},{"id":59,"x":"Thu","y":"Feb 24","z":18607},{"id":60,"x":"Fri","y":"Feb 24","z":93430},{"id":61,"x":"Sat","y":"Feb 24","z":63274},{"id":62,"x":"Sun","y":"Mar 03","z":75603},{"id":63,"x":"Mon","y":"Mar 03","z":71608},{"id":64,"x":"Tue","y":"Mar 03","z":12459},{"id":65,"x":"Wed","y":"Mar 03","z":44744},{"id":66,"x":"Thu","y":"Mar 03","z":23927},{"id":67,"x":"Fri","y":"Mar 03","z":46439},{"id":68,"x":"Sat","y":"Mar 03","z":25802},{"id":69,"x":"Sun","y":"Mar 10","z":92834},{"id":70,"x":"Mon","y":"Mar 10","z":34051},{"id":71,"x":"Tue","y":"Mar 10","z":41145},{"id":72,"x":"Wed","y":"Mar 10","z":10369},{"id":73,"x":"Thu","y":"Mar 10","z":58411},{"id":74,"x":"Fri","y":"Mar 10","z":38489},{"id":75,"x":"Sat","y":"Mar 10","z":72631},{"id":76,"x":"Sun","y":"Mar 17","z":32731},{"id":77,"x":"Mon","y":"Mar 17","z":81415},{"id":78,"x":"Tue","y":"Mar 17","z":95134},{"id":79,"x":"Wed","y":"Mar 17","z":41017},{"id":80,"x":"Thu","y":"Mar 17","z":87717},{"id":81,"x":"Fri","y":"Mar 17","z":86045},{"id":82,"x":"Sat","y":"Mar 17","z":23768}]}
设置 3：
{"data":[{"id":20,"x":"Sun","y":"Jan 20","z":37412},{"id":21,"x":"Mon","y":"Jan 20","z":47533},{"id":22,"x":"Tue","y":"Jan 20","z":14505},{"id":23,"x":"Wed","y":"Jan 20","z":37005},{"id":24,"x":"Thu","y":"Jan 20","z":9192},{"id":25,"x":"Fri","y":"Jan 20","z":97617},{"id":26,"x":"Sat","y":"Jan 20","z":77287},{"id":27,"x":"Sun","y":"Jan 27","z":58184},{"id":28,"x":"Mon","y":"Jan 27","z":76495},{"id":29,"x":"Tue","y":"Jan 27","z":15483},{"id":30,"x":"Wed","y":"Jan 27","z":15506},{"id":31,"x":"Thu","y":"Jan 27","z":59376},{"id":32,"x":"Fri","y":"Jan 27","z":40922},{"id":33,"x":"Sat","y":"Jan 27","z":80935},{"id":34,"x":"Sun","y":"Feb 03","z":85170},{"id":35,"x":"Mon","y":"Feb 03","z":62618},{"id":36,"x":"Tue","y":"Feb 03","z":42706},{"id":37,"x":"Wed","y":"Feb 03","z":35591},{"id":38,"x":"Thu","y":"Feb 03","z":20432},{"id":39,"x":"Fri","y":"Feb 03","z":14757},{"id":40,"x":"Sat","y":"Feb 03","z":17043},{"id":41,"x":"Sun","y":"Feb 10","z":60450},{"id":42,"x":"Mon","y":"Feb 10","z":33571},{"id":43,"x":"Tue","y":"Feb 10","z":72124},{"id":44,"x":"Wed","y":"Feb 10","z":65037},{"id":45,"x":"Thu","y":"Feb 10","z":83334},{"id":46,"x":"Fri","y":"Feb 10","z":48881},{"id":47,"x":"Sat","y":"Feb 10","z":88950},{"id":48,"x":"Sun","y":"Feb 17","z":65482},{"id":49,"x":"Mon","y":"Feb 17","z":15120},{"id":50,"x":"Tue","y":"Feb 17","z":68620},{"id":51,"x":"Wed","y":"Feb 17","z":61287},{"id":52,"x":"Thu","y":"Feb 17","z":51870},{"id":53,"x":"Fri","y":"Feb 17","z":62841},{"id":54,"x":"Sat","y":"Feb 17","z":83644},{"id":55,"x":"Sun","y":"Feb 24","z":18993},{"id":56,"x":"Mon","y":"Feb 24","z":72740},{"id":57,"x":"Tue","y":"Feb 24","z":27468},{"id":58,"x":"Wed","y":"Feb 24","z":12437},{"id":59,"x":"Thu","y":"Feb 24","z":18607},{"id":60,"x":"Fri","y":"Feb 24","z":93430},{"id":61,"x":"Sat","y":"Feb 24","z":63274},{"id":62,"x":"Sun","y":"Mar 03","z":75603},{"id":63,"x":"Mon","y":"Mar 03","z":71608},{"id":64,"x":"Tue","y":"Mar 03","z":12459},{"id":65,"x":"Wed","y":"Mar 03","z":44744},{"id":66,"x":"Thu","y":"Mar 03","z":23927},{"id":67,"x":"Fri","y":"Mar 03","z":46439},{"id":68,"x":"Sat","y":"Mar 03","z":25802},{"id":69,"x":"Sun","y":"Mar 10","z":92834},{"id":70,"x":"Mon","y":"Mar 10","z":34051},{"id":71,"x":"Tue","y":"Mar 10","z":41145},{"id":72,"x":"Wed","y":"Mar 10","z":10369},{"id":73,"x":"Thu","y":"Mar 10","z":58411},{"id":74,"x":"Fri","y":"Mar 10","z":38489},{"id":75,"x":"Sat","y":"Mar 10","z":72631},{"id":76,"x":"Sun","y":"Mar 17","z":32731},{"id":77,"x":"Mon","y":"Mar 17","z":81415},{"id":78,"x":"Tue","y":"Mar 17","z":95134},{"id":79,"x":"Wed","y":"Mar 17","z":41017},{"id":80,"x":"Thu","y":"Mar 17","z":87717},{"id":81,"x":"Fri","y":"Mar 17","z":86045},{"id":82,"x":"Sat","y":"Mar 17","z":23768},{"id":83,"x":"Sun","y":"Mar 24","z":54863},{"id":84,"x":"Mon","y":"Mar 24","z":71764},{"id":85,"x":"Tue","y":"Mar 24","z":87310},{"id":86,"x":"Wed","y":"Mar 24","z":34083},{"id":87,"x":"Thu","y":"Mar 24","z":47967},{"id":88,"x":"Fri","y":"Mar 24","z":88986},{"id":89,"x":"Sat","y":"Mar 24","z":71805}]}
设置 4：
{"data":[{"id":27,"x":"Sun","y":"Jan 27","z":58184},{"id":28,"x":"Mon","y":"Jan 27","z":76495},{"id":29,"x":"Tue","y":"Jan 27","z":15483},{"id":30,"x":"Wed","y":"Jan 27","z":15506},{"id":31,"x":"Thu","y":"Jan 27","z":59376},{"id":32,"x":"Fri","y":"Jan 27","z":40922},{"id":33,"x":"Sat","y":"Jan 27","z":80935},{"id":34,"x":"Sun","y":"Feb 03","z":85170},{"id":35,"x":"Mon","y":"Feb 03","z":62618},{"id":36,"x":"Tue","y":"Feb 03","z":42706},{"id":37,"x":"Wed","y":"Feb 03","z":35591},{"id":38,"x":"Thu","y":"Feb 03","z":20432},{"id":39,"x":"Fri","y":"Feb 03","z":14757},{"id":40,"x":"Sat","y":"Feb 03","z":17043},{"id":41,"x":"Sun","y":"Feb 10","z":60450},{"id":42,"x":"Mon","y":"Feb 10","z":33571},{"id":43,"x":"Tue","y":"Feb 10","z":72124},{"id":44,"x":"Wed","y":"Feb 10","z":65037},{"id":45,"x":"Thu","y":"Feb 10","z":83334},{"id":46,"x":"Fri","y":"Feb 10","z":48881},{"id":47,"x":"Sat","y":"Feb 10","z":88950},{"id":48,"x":"Sun","y":"Feb 17","z":65482},{"id":49,"x":"Mon","y":"Feb 17","z":15120},{"id":50,"x":"Tue","y":"Feb 17","z":68620},{"id":51,"x":"Wed","y":"Feb 17","z":61287},{"id":52,"x":"Thu","y":"Feb 17","z":51870},{"id":53,"x":"Fri","y":"Feb 17","z":62841},{"id":54,"x":"Sat","y":"Feb 17","z":83644},{"id":55,"x":"Sun","y":"Feb 24","z":18993},{"id":56,"x":"Mon","y":"Feb 24","z":72740},{"id":57,"x":"Tue","y":"Feb 24","z":27468},{"id":58,"x":"Wed","y":"Feb 24","z":12437},{"id":59,"x":"Thu","y":"Feb 24","z":18607},{"id":60,"x":"Fri","y":"Feb 24","z":93430},{"id":61,"x":"Sat","y":"Feb 24","z":63274},{"id":62,"x":"Sun","y":"Mar 03","z":75603},{"id":63,"x":"Mon","y":"Mar 03","z":71608},{"id":64,"x":"Tue","y":"Mar 03","z":12459},{"id":65,"x":"Wed","y":"Mar 03","z":44744},{"id":66,"x":"Thu","y":"Mar 03","z":23927},{"id":67,"x":"Fri","y":"Mar 03","z":46439},{"id":68,"x":"Sat","y":"Mar 03","z":25802},{"id":69,"x":"Sun","y":"Mar 10","z":92834},{"id":70,"x":"Mon","y":"Mar 10","z":34051},{"id":71,"x":"Tue","y":"Mar 10","z":41145},{"id":72,"x":"Wed","y":"Mar 10","z":10369},{"id":73,"x":"Thu","y":"Mar 10","z":58411},{"id":74,"x":"Fri","y":"Mar 10","z":38489},{"id":75,"x":"Sat","y":"Mar 10","z":72631},{"id":76,"x":"Sun","y":"Mar 17","z":32731},{"id":77,"x":"Mon","y":"Mar 17","z":81415},{"id":78,"x":"Tue","y":"Mar 17","z":95134},{"id":79,"x":"Wed","y":"Mar 17","z":41017},{"id":80,"x":"Thu","y":"Mar 17","z":87717},{"id":81,"x":"Fri","y":"Mar 17","z":86045},{"id":82,"x":"Sat","y":"Mar 17","z":23768},{"id":83,"x":"Sun","y":"Mar 24","z":54863},{"id":84,"x":"Mon","y":"Mar 24","z":71764},{"id":85,"x":"Tue","y":"Mar 24","z":87310},{"id":86,"x":"Wed","y":"Mar 24","z":34083},{"id":87,"x":"Thu","y":"Mar 24","z":47967},{"id":88,"x":"Fri","y":"Mar 24","z":88986},{"id":89,"x":"Sat","y":"Mar 24","z":71805},{"id":90,"x":"Sun","y":"Mar 31","z":36050},{"id":91,"x":"Mon","y":"Mar 31","z":77982},{"id":92,"x":"Tue","y":"Mar 31","z":70757},{"id":93,"x":"Wed","y":"Mar 31","z":15566},{"id":94,"x":"Thu","y":"Mar 31","z":41412},{"id":95,"x":"Fri","y":"Mar 31","z":24239},{"id":96,"x":"Sat","y":"Mar 31","z":67389}]}