如何解决在 d3.js 热图中绘制节点 - 需要指导
我是 d3.js 实现的新手。需要一些帮助 d3.js 热图
我有一个要求： 显示每条记录之间差异的热图。基于记录的严重性和概率类型：
假设这些记录显示在图表上。 代码在 Comment " //Add dots or circles " 之后开始。 记录数据示例：
{
"group":"Likely","variable":"Significant","value":79,"record":"Retention of environmental safety records","color":"red"
}
这些记录的数据在变量“点”中您可以在下面的代码中找到。我有 3 条记录。但是 2 个圆圈是重叠的。 我从事过热图设计。 结合：
热图：https://www.d3-graph-gallery.com/graph/heatmap_style.html 连通散点图：https://www.d3-graph-gallery.com/graph/connectedscatter_tooltip.html 现在，我刚刚更新了数据：
我有两个问题：
细节：
1.重叠点问题 这些记录的数据在变量“点”中您可以在下面的代码中找到。我有 3 条记录。但是两个圆圈重叠。
所需的输出是这样的：圆圈不应该重叠。
如果两条记录有相同的数据，应该显示两条记录。我需要帮助来实现这一点。任何建议表示赞赏。
** 2. 工具提示问题：**
我之前遇到了 Tooltip 问题（它使用 div 标签），如下所示：
Html 从 div 更新为 Svg，如下所示：
更新后，
除了工具提示部分，整个热图都在工作。
将工具提示部分更新为 Svg，如下所示： 
代码：
<!-- Code from d3-graph-gallery.com -->
<!DOCTYPE html>
<Meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v5.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz">
<svg
class="d3"
width={svgWidth}
height={svgHeight}
lwc:dom="manual"
></svg></div>
<!-- Load color palettes -->
<script>
// set the dimensions and margins of the graph
var margin = {top: 80,right: 25,bottom: 30,left: 100},width = 550 - margin.left - margin.right,height = 450 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select(this.template.querySelector('svg.d3'))
.append("svg")
.attr("width",width + margin.left + margin.right)
.attr("height",height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
//Read the data
var data = [{"group":"Rare","variable":"Insignificant","value":45,"color":"purple"},{"group":"Rare","variable":"Minimal","value":95,"variable":"Moderate","value":22,"color":"green"},"value":14,"variable":"Catastrophic","value":59,"color":"yellow"},{"group":"Unlikely","value":37,"value":81,"value":84,"color":"orange"},{"group":"Probable","value":96,"value":98,"value":10,"value":86,"color":"red"},{"group":"Likely","value":75,"value":18,"value":92,"value":43,"value":16,{"group":"Almost Certain","value":44,"value":29,"value":58,"value":55,"value":65,"color":"red"}]; // Labels of row and columns -> unique identifier of the column called 'group' and 'variable'
var myGroups = d3.map(data,function(d){return d.group;}).keys()
var myVars = d3.map(data,function(d){return d.variable;}).keys()
// Build X scales and axis:
var x = d3.scaleBand()
.range([ 0,width ])
.domain(myGroups)
.padding(0.05);
svg.append("g")
.style("font-size",15)
.attr("transform","translate(0," + height + ")")
.call(d3.axisBottom(x).tickSize(0))
.select(".domain").remove()
// Build Y scales and axis:
var y = d3.scaleBand()
.range([ height,0 ])
.domain(myVars)
.padding(0.05);
svg.append("g")
.style("font-size",15)
.call(d3.axisLeft(y).tickSize(0))
.select(".domain").remove()
// Build color scale
var myColor = d3.scaleSequential()
.interpolator(d3.interpolateInferno)
.domain([1,100])
// create a tooltip
var tooltip = d3.select("#my_dataviz")
.append("div")
.style("opacity",0)
.attr("class","tooltip")
.style("background-color","white")
.style("border","solid")
.style("border-width","2px")
.style("border-radius","5px")
.style("padding","5px")
.style("position","fixed")
// Three function that change the tooltip when user hover / move / leave a cell
var mouSEOver = function(d) {
tooltip
.style("opacity",1)
d3.select(this)
.style("stroke","black")
.style("opacity",1)
}
var mousemove = function(d) {
tooltip
.html("The exact value of<br>this cell is: " + d.value)
.style("left",(d3.mouse(this)[0]+70) + "px")
.style("top",(d3.mouse(this)[1]) + "px")
}
var mouseleave = function(d) {
tooltip
.style("opacity",0)
d3.select(this)
.style("stroke","none")
.style("opacity",0.8)
}
// add the squares
svg.selectAll()
.data(data,function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("x",function(d) { return x(d.group) })
.attr("y",function(d) { return y(d.variable) })
.attr("rx",4)
.attr("ry",4)
.attr("width",x.bandwidth() )
.attr("height",y.bandwidth() )
.style("fill",function(d) { return d.color } )
.style("stroke-width",4)
.style("stroke",0.8)
.on("mouSEOver",mouSEOver)
.on("mousemove",mousemove)
.on("mouseleave",mouseleave)
// Three function that change the tooltip when user hover / move / leave a cell
var mouSEOver1 = function(d) {
tooltip
.style("opacity",1)
}
var mousemove1 = function(d) {
tooltip
.html("4. " + d.record)
.style("left",(d3.mouse(this)[0]+90) + "px")
.style("top",(d3.mouse(this)[1]) + "px")
}
var mouseleave1 = function(d) {
tooltip
.style("opacity",0.8)
}
//Add dots or circles
var dots =
[{"group":"Likely","record":"Risk of Fines from European Union GDPR due to data breach","record":"Risk Management Case record","color":"green"}];
// Add the points
svg
.append("g")
.selectAll("dot")
.data(dots)
.enter()
.append("circle")
.attr("class","myCircle")
.attr("cx",function(d) { return x(d.group) + x.bandwidth()/2 } )
.attr("cy",function(d) { return y(d.variable)+ y.bandwidth()/2 } )
.attr("r",8)
.attr("stroke","#69b3a2")
.attr("stroke-width",3)
.attr("fill",function(d) { return d.color })
.on("mouSEOver",mouSEOver1)
.on("mousemove",mousemove1)
.on("mouseleave",mouseleave1)
//})
// Add title to graph
svg.append("text")
.attr("x",0)
.attr("y",-50)
.attr("text-anchor","left")
.style("font-size","22px")
.text("A heatmap");
// Add subtitle to graph
svg.append("text")
.attr("x",-20)
.attr("text-anchor","14px")
.style("fill","grey")
.style("max-width",400)
.text("A short description of the take-away message of this chart.");
</script>
输出（更新）：
谁能帮我解决这些问题。 我需要在同一个方块内显示多个点，每个点作为一个单独的元素。当您将鼠标悬停在它上面时，它应该显示它所代表的记录。
任何建议表示赞赏。谢谢
解决方法
给你的工具提示一个固定的位置：
.style("position","fixed")
这将允许 top 和 left 属性影响其定位。
要使点显示在框中，请将 cx 属性更改为：
.attr("cx",function(d) { return x(d.group) + x.bandwidth()/2 } )
这应该使每个框内的点居中。
为了给点自己的定位，点需要有自己的 y 和 x 尺度。只要确保它具有相同的宽度和高度。
你有其他数据集吗？如果没有，我想知道不同的尺度是否会给你你正在寻找的结果。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
