如何在 D3 svg 矩形中显示数据映射

How to display data map in D3 svg rectangle?

本文关键字：显示 数据 映射 D3 svg      更新时间：2023-09-26

我正在尝试使用 D3 在 SVG 矩形内显示键值对数据。为此，数据在映射中读取。我能够在矩形内显示第一个 K-V。这是代码：

data = {"Key1": 4,
    "Key2": "Value2",
    "Key3": "BFA",
    "Key4": "Applied",
    "level": "Upper",
    "description": "To test this category",
    };
var mymap = d3.map(data);
var drect = d3.selectAll("body").append("svg").attr("width", "100%").attr("height", "100%").append("g");
var drect_rect = drect.append("rect")
                        .attr("width",200)
                        .attr("height",300)
                        .attr("x",100)
                        .attr("y",200)
                        .attr("stroke-width","1px")
                        .attr("stroke","#a8a8a8")
                        .attr("fill","none");               
var drect_text = drect.append("text")
                        .attr("x",110)
                        .attr("y",210)
                        .style("fill", "black")
                        .text(function(d){
                            //mymap.forEach(function(k,v){console.log(k,v);});
                            return mymap.keys()[0] +":"+ mymap.values()[0];
                            });

这样做之后，我想为什么不迭代地图条目并附加每个 K-V 对的文本？ 所以我尝试了以下代码。但它失败了，因为没有迭代器 i 可以抓住。

mymap.forEach(function(k,v,i){
        drect.append("text")
                        .attr("x",110)
                        .attr("y",function(i){return 210+(i*20);})
                        .style("fill", "black")
                        .text(function(i){
                            return mymap.keys()[i] +":"+ mymap.values()[i];
                            }); 
                    });
我

怀疑我走在正确的道路上。我正在尝试在 SVG 矩形中实现以下文本输出，并打开任何其他库，如 D3+ 或 jQuery。在基本的 D3 库中仍然面临问题。

Key1: 4
Key2: Value2
Key3: BFA
Key4: Applied
level: Upper
description: To test this category

您应该利用 d3 数据绑定。 为了使它工作，您必须"d3-ify"您的数据并将其从对象移动到数组。 d3.条目将很好地用于此：

var d3_data = d3.entries(data); //<-- convert data to array
drect.selectAll('text')
  .data(d3_data) //<-- data-binding
  .enter()
  .append("text") //<-- append text for every entry in array
  .attr("x", 110)
  .attr("y", function(d,i){
    return 210 + (i * 20); //<-- position it on y
  })
  .style("fill", "black")
  .text(function(d) {
    return d.key + ": " + d.value; //<-- add text
  });

完整代码：

<!DOCTYPE html>
<html>
<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
  <script>
    var data = {
      "Key1": 4,
      "Key2": "Value2",
      "Key3": "BFA",
      "Key4": "Applied",
      "level": "Upper",
      "description": "To test this category",
    };
    
    var mymap = d3.map(data);
    var drect = d3.selectAll("body")
      .append("svg")
      .attr("width", "100%")
      .attr("height", "500px")
      .append("g");
    var drect_rect = drect.append("rect")
      .attr("width", 250)
      .attr("height", 300)
      .attr("x", 100)
      .attr("y", 20)
      .attr("stroke-width", "1px")
      .attr("stroke", "#a8a8a8")
      .attr("fill", "none");
      
    var d3_data = d3.entries(data);
      
    drect.selectAll('text')
      .data(d3_data)
      .enter()
      .append("text")
      .attr("x", 110)
      .attr("y", function(d,i){
        return 40 + (i * 20);
      })
      .style("fill", "black")
      .text(function(d) {
        return d.key + ": " + d.value;
      });
  </script>
</body>
</html>

相关文章：