Javascript 在d3.js热图中绘制节点-需要指导_Javascript_D3.js_Nodes_Heatmap_Svg.js

Javascript 在d3.js热图中绘制节点-需要指导

javascript d3.js

Javascript 在d3.js热图中绘制节点-需要指导,javascript,d3.js,nodes,heatmap,svg.js,Javascript,D3.js,Nodes,Heatmap,Svg.js,我是d3.js实现的新手。需要帮助d3.js热图吗我有一个要求：显示每个记录之间差异的热图。根据记录严重性和概率类型：所需图像：数据：在上面的输出图片中，您可以看到圆圈：假设这些记录显示在图形上。注释“//添加点或圆”后开始的代码。记录数据示例： { "group":"Likely", "variable":"Significant", "value":79, "reco

我是d3.js实现的新手。需要帮助d3.js热图吗

我有一个要求： 显示每个记录之间差异的热图。根据记录严重性和概率类型：

所需图像： 数据： 在上面的输出图片中，您可以看到圆圈：

假设这些记录显示在图形上。注释“//添加点或圆”后开始的代码。记录数据示例：

{
"group":"Likely",
"variable":"Significant",
"value":79,
"record":"Retention of environmental safety records",
"color":"red"
}

这些记录的数据以可变的“点”表示，您可以在下面的代码中找到。我有三张唱片。但有两个圆圈重叠。我做过热图设计。合并：

热图：连接散点图：目前，我刚刚更新了数据：

我有两个问题：

重叠点问题

更新到svg后不显示工具提示

详细信息：

1。重叠点问题 这些记录的数据以可变的“点”表示，您可以在下面的代码中找到。我有三张唱片。但有两个圆圈重叠

期望的输出是这样的：圆圈不应该重叠

如果两条记录的数据相同，则应显示两条记录。我需要帮助来实现这一点。如有任何建议，我们将不胜感激

**二,。工具提示问题：**

我之前对工具提示有一个问题（它正在使用div标记），如下所示：由于某些要求，我不得不在Html中使用svg标记，而不是Div标记。因为这必须在Salesforce的Lwc中实现

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,"color":"purple"},{"group":"Rare","variable":"Moderate","value":22,"color":"green"},{"group":"Rare","variable":"Significant","value":14,"color":"green"},{"group":"Rare","variable":"Catastrophic","value":59,"color":"yellow"},{"group":"Unlikely","variable":"Minimal","value":37,"color":"purple"},{"group":"Unlikely","variable":"Insignificant","value":37,"color":"purple"},{"group":"Unlikely","variable":"Moderate","value":81,"color":"green"},{"group":"Unlikely","variable":"Significant","value":79,"color":"yellow"},{"group":"Unlikely","variable":"Catastrophic","value":84,"color":"orange"},{"group":"Probable","variable":"Insignificant","value":96,"color":"purple"},{"group":"Probable","variable":"Minimal","value":37,"color":"green"},{"group":"Probable","variable":"Moderate","value":98,"color":"yellow"},{"group":"Probable","variable":"Significant","value":10,"color":"orange"},{"group":"Probable","variable":"Catastrophic","value":86,"color":"red"},{"group":"Likely","variable":"Insignificant","value":75,"color":"green"},{"group":"Likely","variable":"Minimal","value":18,"color":"yellow"},{"group":"Likely","variable":"Moderate","value":92,"color":"orange"},{"group":"Likely","variable":"Significant","value":43,"color":"red"},{"group":"Likely","variable":"Catastrophic","value":16,"color":"red"},{"group":"Almost Certain","variable":"Insignificant","value":44,"color":"green"},{"group":"Almost Certain","variable":"Minimal","value":29,"color":"yellow"},{"group":"Almost Certain","variable":"Moderate","value":58,"color":"orange"},{"group":"Almost Certain","variable":"Significant","value":55,"color":"red"},{"group":"Almost Certain","variable":"Catastrophic","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", "none")
          .style("opacity", 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)
        d3.select(this)
          .style("stroke", "black")
          .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)
        d3.select(this)
          .style("stroke", "none")
          .style("opacity", 0.8)
      }
      
      //Add dots or circles     
        var dots = 
    [{"group":"Likely","variable":"Significant","value":79,"record":"Retention of environmental safety records","color":"red"},
    {"group":"Unlikely","variable":"Minimal","value":84,"record":"Risk of Fines from European Union GDPR due to data breach","color":"orange"},
    {"group":"Unlikely","variable":"Minimal","value":84,"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", 0)
            .attr("y", -20)
            .attr("text-anchor", "left")
            .style("font-size", "14px")
            .style("fill", "grey")
            .style("max-width", 400)
            .text("A short description of the take-away message of this chart.");
    
    
    </script>


//设置图形的尺寸和边距
var margin={顶部：80，右侧：25，底部：30，左侧：100}，
宽度=550-margin.left-margin.right，
高度=450-边距.顶部-边距.底部；
//将svg对象附加到页面主体
var svg=d3.select（this.template.querySelector（'svg.d3'））
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//读取数据
var数据=[{“组”：“稀有”，“变量”：“无意义”，“值”：45，“颜色”：“紫色”}，{“组”：“稀有”，“变量”：“最小”，“值”：95，“颜色”：“紫色”}，{“组”：“稀有”，“变量”：“中等”，“值”：22，“颜色”：“绿色”}，{“组”：“稀有”，“变量”：“有意义”，“值”：14，“颜色”：“绿色”}，{“组”：“稀有”，“变量”：“灾难性”，“值”：59，“颜色”：“黄色”}，{“组”：“不太可能”、“变量”：“最小”、“值”：37，“颜色”：“紫色”}，{“组”：“不可能”、“变量”：“不重要”、“值”：37，“颜色”：“紫色”}，{“组”：“不太可能”、“变量”：“中等”、“值”：81，“颜色”：“绿色”}，{“组”：“不太可能”、“变量”：“显著”、“值”：79，“颜色”：“黄色”}，{“组”：“不太可能”、“变量”：“灾难性”值：84，“颜色”：“橙色”}，{“组”：“可能的”、“变量”：“不重要的”、“值”：96，“颜色”：“紫色”}，{“组”：“可能的”、“变量”：“最小的”、“值”：37，“颜色”：“绿色”}，{“组”：“可能的”、“变量”：“中等的”、“值”：98，“颜色”：“黄色”}，{“组”：“可能的”、“变量”：“重要的”、“值”：10，“颜色”：“橙色”}，{“组”：“可能的”、“变量”：灾难性“，”值“：”86，“颜色“，”红色“，”组“，”可能“，”变量“，”不重要“，”值“，”75，“颜色“，”组“，”可能“，”变量“，”最小“，”值“，”18，“颜色“，”黄色“，”组“，”可能“，”变量“，”橙色“，”组“，”可能“，”变量“，”重要“，”值“，”43，“颜色“，”红色“，”组“，”可能“，”变量“：”灾难性“，”值“：”16，“颜色“：”红色“，”组“：”几乎肯定“，”变量“，”无关紧要“，”值“：”44，“颜色“，”绿色“，”组“，”几乎肯定“，”变量“，”最小“，”值“，”29，“颜色“，”黄色“，”组“，”几乎肯定“，”变量“，”显著“，”值“，”55，“颜色“：”红色“}”，{“组”：“几乎确定”，“变量”：“灾难”，“值”：65，“颜色”：“红色”}]；//行和列的标签->名为“组”和“变量”的列的唯一标识符
var myGroups=d3.map（数据，函数（d）{return d.group；}）.keys（）
var myVars=d3.map（数据，函数（d）{return d.variable；}）.keys（）
//构建X比例和轴：
var x=d3.scaleBand（）
.范围（[0，宽度]）
.域（myGroups）
.填充（0.05）；
svg.append（“g”）
.style（“字体大小”，15）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x.tickSize（0））
.select（“.domain”）.remove（）
//构建Y比例和轴：
变量y=d3.scaleBand（）
.范围（[高度，0]）
.domain（myVars）
.填充（0.05）；
svg.append（“g”）
.style（“字体大小”，15）
.call（d3.axisLeft（y.tickSize（0））
.select（“.domain”）.remove（）
//建立色标
var myColor=d3.scaleSequential（）
.内插器（d3.内插inferno）
.domain（[1100]）
//创建工具提示
var tooltip=d3。选择（“我的数据维”）
.附加（“div”）
.style（“不透明度”，0）
.attr（“类”、“工具提示”）
.style（“背景色”、“白色”）
.style（“边框”、“实体”）
.style（“边框宽度”、“2px”）
.样式（“边框半径”、“5px”）
.style（“填充”、“5px”）
.样式（“位置”、“固定”）
//三个函数，用于在用户悬停/移动/离开单元格时更改工具提示
var mouseover=函数（d）{
工具提示
.style（“不透明度”，1）
d3.选择（本）
.style（“笔划”、“黑色”）
.style（“不透明度”，1）
}
.style("position","fixed")

.attr("cx", function(d) { return x(d.group) + x.bandwidth()/2 } )