个人中心
gpt4 book ai didi

javascript - 如何在D3 svg矩形中显示数据图？

转载 作者：行者123 更新时间：2023-11-27 23:23:23 26 4
gpt4 key购买 nike

我正在尝试使用 D3 在 SVG 矩形内显示键值对数据。为此，在 map 中读取数据。我能够在矩形内显示第一个 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 data-binding 。为了使其工作，您必须“d3-ify”您的数据并将其从对象移动到数组。 d3.entries对此效果很好:

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>

关于javascript - 如何在D3 svg矩形中显示数据图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35200695/

26 4 0
文章推荐： JavaScript bool 赋值
文章推荐： htmlNode.childNodes[i].nodeName 中 #text 的 JavaScript 含义
文章推荐： javascript - 如何根据 ng-options 设置隐藏值？
文章推荐： javascript - 将用户输入添加到数组中并在单击时显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com