javascript - D3 v4 网格 : How do I bind the data properly?-6ren

javascript - D3 v4 网格 : How do I bind the data properly?

转载作者：行者123 更新时间：2023-12-04 07:36:24

我一直在 d3 中处理一个方形网格，以显示 78 个单独事件的颜色编码原因。加载后，我只显示一个黑色方 block ，似乎 d.x 和 d.y 定位没有通过，我不完全确定为什么。

d3.tsv("platform.tsv", function(data) {

    for (var i = 0; i < data.length; i++) {
        console.log(data[i].report_num);
        console.log(data[i].platform_medium);
    }

    var platformData = getWords(data);
    var squareSize = 20;
    var squarePad =5;
    var numPerRow = width / (squareSize + squarePad);
    var margin = {top: 10, right: 30, bottom: 30, left: 60};
    var width = 750 - margin.left - margin.right;
    var height = 520 - margin.top - margin.bottom;

    function getWords(data) {
        return data.map(function (d, i) {
            // what category is this report?
            d.platform_medium = d.platform_medium;
            // sequential of report number
            d.report_num = +d.report_num;

            // positioning for square visual
            // stored here to make it easier
            // to keep track of.
            d.col = i % numPerRow;
            d.x = d.col * (squareSize + squarePad);
            d.row = Math.floor(i / numPerRow);
            d.y = d.row * (squareSize + squarePad);
            return d;
        });
    }

    var gridvis = d3.select("#chart2")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var gridFill7 = gridvis.append("defs")
                           .append("linearGradient")
                           .attr("id", "gridFill7")
                           .attr("x1", "0%")
                           .attr("x2", "0%")
                           .attr("y1", "100%")
                           .attr("y2", "0%");

    gridFill7.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#0652DD");

    gridFill7.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#C4E538");

    var gridFill8 = gridvis.append("defs")
                           .append("linearGradient")
                           .attr("id", "gridFill8")
                           .attr("x1", "0%")
                           .attr("x2", "0%")
                           .attr("y1", "100%")
                           .attr("y2", "0%");

    gridFill8.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#0652DD");

    gridFill8.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#EE5A24");


    // square grid
    // @v4 Using .merge here to ensure
    // new and old data have same attrs applied
    var squares = gridvis.selectAll('.square').data(platformData, function (d) { return d.report_num; });

    var squaresE = squares.enter()
                          .append('rect')
                          .classed('square', true);

    var squares = squares.merge(squaresE)
                         .attr('width', squareSize)
                         .attr('height', squareSize)
                         .attr('fill', '#fff')
                         .classed('fill-square', function (d) { return d.platform_medium; })
                         .attr('x', function (d) { return d.x;})
                         .attr('y', function (d) { return d.y;})
                         .attr('opacity', 0);


    function highlightGrid() {
        gridvis.selectAll('.fill-square')
               .transition()
               .duration(800)
               .attr('opacity', 1.0)
               .attr('fill', function (d) { 
                    if (d.platform_medium===1) {return "#0652DD";}
                    else if (d.platform_medium===2) {return "#9980FA";}
                    else if (d.platform_medium===3) {return "#C4E538";}
                    else if (d.platform_medium===4) {return "#ED4C67";}
                    else if (d.platform_medium===5) {return "#F79F1F";}
                    else if (d.platform_medium===6) {return "#EE5A24";}
                    else if (d.platform_medium===7) {return "url(#gridfill7)";}
                    else if (d.platform_medium===8) {return "url(#gridfill8)";}

                });
    }

    highlightGrid();

});

以下是我的示例数据。希望有比我更有经验的人看看:)

report_num  covid_related   platform_medium
1   0   1
2   0   1
3   0   1
4   0   1
5   0   1
6   0   3
7   0   1
8   0   3
9   0   1
10  0   3
11  0   1
12  0   3
13  1   2
14  1   1
15  1   3
16  1   1
17  1   1
18  1   1
19  1   1
20  1   1
21  1   1
22  1   1
23  1   1
24  0   1
25  0   7
26  1   1
27  1   1
28  1   1
29  1   1
30  1   1
31  1   1
32  1   1
33  1   1
34  1   1
35  1   1
36  0   1
37  0   1
38  0   2
39  0   7
40  1   1
41  1   1
42  1   1
43  1   1
44  1   1
45  1   1
46  0   5
47  0   5
48  0   1
49  0   1
50  0   1
51  0   1
52  1   1
53  1   1
54  1   1
55  0   1
56  0   5
57  0   1
58  0   1
59  0   1
60  0   1
61  0   7
62  0   1
63  0   1
64  0   1
65  0   1
66  0   1
67  1   5
68  1   1
69  1   1
70  1   3
71  1   3
72  1   1
73  1   1
74  1   7
75  1   8
76  1   1
77  1   4
78  1   2

最佳答案

有几个问题会导致问题。如果您检查页面，您会看到您已附加所有矩形，但 x,y 属性为 NaN。如果我们回溯，我们会看到 numPerRow 中有一个未定义的值。 :

var platformData = getWords(data);
...
var numPerRow = width / (squareSize + squarePad);
...
var width = 750 - margin.left - margin.right;

都不是 width或 numPerRow当您调用 getWords 时已定义, 两者都是 getWords需要。此外， width定义 numPerRow 时未定义, 所以 numPerRow也应该是未定义的，这意味着在 getWords我们分配 undefined到 d.x 和 d.y，这意味着所有矩形都附加到相同的位置:[0,0](在父级 g 内)。
解决这个问题，我们确保 width在 numPerRow 之前定义和 getWords在其他两个都定义后调用。现在我们有一个矩形排列(我还修改了父 g 上的平移，所以左上角的矩形不在屏幕中间):

var data = d3.csvParse(d3.select("pre").remove().text());


   
    var squareSize = 20;
    var squarePad =5;
   
    var margin = {top: 10, right: 30, bottom: 30, left: 60};
    var width = 750 - margin.left - margin.right;
    var height = 520 - margin.top - margin.bottom;

     var numPerRow = width / (squareSize + squarePad);

    function getWords(data) {
        return data.map(function (d, i) {
            // what category is this report?
            d.platform_medium = d.platform_medium;
            // sequential of report number
            d.report_num = +d.report_num;

            // positioning for square visual
            // stored here to make it easier
            // to keep track of.
            d.col = i % numPerRow;
            d.x = d.col * (squareSize + squarePad);
            d.row = Math.floor(i / numPerRow);
            d.y = d.row * (squareSize + squarePad);
            return d;
        });
    }
    
    var platformData = getWords(data);
    

    var gridvis = d3.select("#chart2")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var gridFill7 = gridvis.append("defs")
                           .append("linearGradient")
                           .attr("id", "gridFill7")
                           .attr("x1", "0%")
                           .attr("x2", "0%")
                           .attr("y1", "100%")
                           .attr("y2", "0%");

    gridFill7.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#0652DD");

    gridFill7.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#C4E538");

    var gridFill8 = gridvis.append("defs")
                           .append("linearGradient")
                           .attr("id", "gridFill8")
                           .attr("x1", "0%")
                           .attr("x2", "0%")
                           .attr("y1", "100%")
                           .attr("y2", "0%");

    gridFill8.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#0652DD");

    gridFill8.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#EE5A24");


    // square grid
    // @v4 Using .merge here to ensure
    // new and old data have same attrs applied
    var squares = gridvis.selectAll('.square').data(platformData, function (d) { return d.report_num; });

    var squaresE = squares.enter()
                          .append('rect')
                          .classed('square', true);

    var squares = squares.merge(squaresE)
                         .attr('width', squareSize)
                         .attr('height', squareSize)
                         .attr('fill', '#fff')
                         .classed('fill-square', function (d) { return d.platform_medium; })
                         .attr('x', function (d) { return d.x;})
                         .attr('y', function (d) { return d.y;})
                         .attr('opacity', 0);


    function highlightGrid() {
        gridvis.selectAll('.fill-square')
               .transition()
               .duration(800)
               .attr('opacity', 1.0)
               .attr('fill', function (d) { 
                    if (d.platform_medium===1) {return "#0652DD";}
                    else if (d.platform_medium===2) {return "#9980FA";}
                    else if (d.platform_medium===3) {return "#C4E538";}
                    else if (d.platform_medium===4) {return "#ED4C67";}
                    else if (d.platform_medium===5) {return "#F79F1F";}
                    else if (d.platform_medium===6) {return "#EE5A24";}
                    else if (d.platform_medium===7) {return "url(#gridfill7)";}
                    else if (d.platform_medium===8) {return "url(#gridfill8)";}

                });
    }

    highlightGrid();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="chart2"></div>
<pre>report_num,covid_related,platform_medium
1,0,1
2,0,1
3,0,1
4,0,1
5,0,1
6,0,3
7,0,1
8,0,3
9,0,1
10,0,3
11,0,1
12,0,3
13,1,2
14,1,1
15,1,3
16,1,1
17,1,1
18,1,1
19,1,1
20,1,1
21,1,1
22,1,1
23,1,1
24,0,1
25,0,7
26,1,1
27,1,1
28,1,1
29,1,1
30,1,1
31,1,1
32,1,1
33,1,1
34,1,1
35,1,1
36,0,1
37,0,1
38,0,2
39,0,7
40,1,1
41,1,1
42,1,1
43,1,1
44,1,1
45,1,1
46,0,5
47,0,5
48,0,1
49,0,1
50,0,1
51,0,1
52,1,1
53,1,1
54,1,1
55,0,1
56,0,5
57,0,1
58,0,1
59,0,1
60,0,1
61,0,7
62,0,1
63,0,1
64,0,1
65,0,1
66,0,1
67,1,5
68,1,1
69,1,1
70,1,3
71,1,3
72,1,1
73,1,1
74,1,7
75,1,8
76,1,1
77,1,4
78,1,2</pre>

但是，矩形没有任何填充。这是因为当您处理数据时，您将 d.platform_medium 保留为字符串:

  d.platform_medium = d.platform_medium;

填充矩形时，使用 === , 和 "4"!== 4。我们可以使用 ==或将字符串转换为数字。我在下面做后者:

var data = d3.csvParse(d3.select("pre").remove().text());


   
    var squareSize = 20;
    var squarePad =5;
   
    var margin = {top: 10, right: 50, bottom: 30, left: 60};
    var width = 750 - margin.left - margin.right;
    var height = 520 - margin.top - margin.bottom;

     var numPerRow = width / (squareSize + squarePad);

    function getWords(data) {
        return data.map(function (d, i) {
            // what category is this report?
            d.platform_medium = +d.platform_medium;
            // sequential of report number
            d.report_num = +d.report_num;

            // positioning for square visual
            // stored here to make it easier
            // to keep track of.
            d.col = i % numPerRow;
            d.x = d.col * (squareSize + squarePad);
            d.row = Math.floor(i / numPerRow);
            d.y = d.row * (squareSize + squarePad);
            return d;
        });
    }
    
    var platformData = getWords(data);
    

    var gridvis = d3.select("#chart2")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var gridFill7 = gridvis.append("defs")
                           .append("linearGradient")
                           .attr("id", "gridFill7")
                           .attr("x1", "0%")
                           .attr("x2", "0%")
                           .attr("y1", "100%")
                           .attr("y2", "0%");

    gridFill7.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#0652DD");

    gridFill7.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#C4E538");

    var gridFill8 = gridvis.append("defs")
                           .append("linearGradient")
                           .attr("id", "gridFill8")
                           .attr("x1", "0%")
                           .attr("x2", "0%")
                           .attr("y1", "100%")
                           .attr("y2", "0%");

    gridFill8.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#0652DD");

    gridFill8.append("stop")
             .attr("offset", "50%")
             .style("stop-color", "#EE5A24");


    // square grid
    // @v4 Using .merge here to ensure
    // new and old data have same attrs applied
    var squares = gridvis.selectAll('.square').data(platformData, function (d) { return d.report_num; });

    var squaresE = squares.enter()
                          .append('rect')
                          .classed('square', true);

    var squares = squares.merge(squaresE)
                         .attr('width', squareSize)
                         .attr('height', squareSize)
                         .attr('fill', '#fff')
                         .classed('fill-square', function (d) { return d.platform_medium; })
                         .attr('x', function (d) { return d.x;})
                         .attr('y', function (d) { return d.y;})
                         .attr('opacity', 0);


    function highlightGrid() {
        gridvis.selectAll('.fill-square')
               .transition()
               .duration(800)
               .attr('opacity', 1.0)
               .attr('fill', function (d) { 
                    if (d.platform_medium===1) {return "#0652DD";}
                    else if (d.platform_medium===2) {return "#9980FA";}
                    else if (d.platform_medium===3) {return "#C4E538";}
                    else if (d.platform_medium===4) {return "#ED4C67";}
                    else if (d.platform_medium===5) {return "#F79F1F";}
                    else if (d.platform_medium===6) {return "#EE5A24";}
                    else if (d.platform_medium===7) {return "url(#gridfill7)";}
                    else if (d.platform_medium===8) {return "url(#gridfill8)";}

                });
    }

    highlightGrid();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="chart2"></div>
<pre>report_num,covid_related,platform_medium
1,0,1
2,0,1
3,0,1
4,0,1
5,0,1
6,0,3
7,0,1
8,0,3
9,0,1
10,0,3
11,0,1
12,0,3
13,1,2
14,1,1
15,1,3
16,1,1
17,1,1
18,1,1
19,1,1
20,1,1
21,1,1
22,1,1
23,1,1
24,0,1
25,0,7
26,1,1
27,1,1
28,1,1
29,1,1
30,1,1
31,1,1
32,1,1
33,1,1
34,1,1
35,1,1
36,0,1
37,0,1
38,0,2
39,0,7
40,1,1
41,1,1
42,1,1
43,1,1
44,1,1
45,1,1
46,0,5
47,0,5
48,0,1
49,0,1
50,0,1
51,0,1
52,1,1
53,1,1
54,1,1
55,0,1
56,0,5
57,0,1
58,0,1
59,0,1
60,0,1
61,0,7
62,0,1
63,0,1
64,0,1
65,0,1
66,0,1
67,1,5
68,1,1
69,1,1
70,1,3
71,1,3
72,1,1
73,1,1
74,1,7
75,1,8
76,1,1
77,1,4
78,1,2</pre>

我已经使用 d3.csvParse 和 pre 来保存数据(而不是 d3.tsv)，因此它可以放入片段中 - 否则，问题中代码的所有更改都记录在上面

关于javascript - D3 v4 网格 : How do I bind the data properly?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67721685/

文章推荐： ruby-on-rails - 在 coffeescript 中获取 rails view helper 方法

文章推荐： c++ - 为什么在抛出我的析构函数时没有调用 std::terminate

python - tensorflow - 线性回归 : Not proper able to do proper plotting
我一直在使用 Tensorflow 解决线性回归问题。我得到一条平坦的曲线 pred_y。我应该如何将我的曲线与观察的训练示例拟合？这是我的 tensorflow 代码: # coding: utf
SQL 错误 : ORA-00933: SQL command not properly ended 00933. 00000 - "SQL command not properly ended"
我浏览了这个网站，找不到类似的场景。我正在尝试运行以下代码 SELECT st.storeid, s.noofitems FROM salestrnsaction AS st, soldvia AS
Python:用类变量替换全局变量是不是 'proper'
请善待我，我是 Python 初学者:-) 现在，我发现编写 Python 程序的“最佳实践”是将主代码包装在“main”函数中，并执行 if "__main__"== __name__: 测试调用“
jquery - "proper"将控制权传递给新页面的方法？
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 9 年前。 Improve
javascript - "Proper"在Javascript中继承引用值的方式？
这个问题在这里已经有了答案: What is the reason to use the 'new' keyword at Derived.prototype = new Base (6 个答案)
java - "proper"tomcat认证登录页面
我正尝试在 tomcat 上为我的 jersey webapp 创建一个用户登录页面，它的行为与网络上的所有其他页面一样。也就是说，用户会看到一个漂亮的登录页面而不是弹出窗口(如 BASIC tomc
java - "properly"接到电话时如何发送短信？
我正在尝试让 Android 服务监听来电，当确实有来电时，获取来电号码并向其发送短信。在我的服务中，我制作了一个PhoneStateListener: TelephonyManager tMana
mysql - "Proper"存放MySQL数据库描述的地方
是否有适当的地方来存储数据库的高级描述？类似于“此数据库用于存储 XYZ 以供 ABC 使用”之类的内容。这不一定是人们需要查询的信息，而是对管理系统的人有用的信息(即几个月前我试图记住几个月前我试图
javascript - Vue列表排序后不重新渲染 "properly"
下面的排序逻辑非常简单: 1. 标记不包含所选排序值的产品 2. 按所选排序值的数量降序对产品进行排序 3.隐藏不包含所选排序值的产品我添加了简单的排序逻辑，它可以对元素进行排序(可以在控制台中预期
c++ - "Proper"用VS2010管理文件
这个问题在这里已经有了答案: Where does Visual Studio look for C++ header files? (7 个答案) 关闭 9 年前。所以，我在 VS2010 中开
连接到MSMQ， "proper"方式？
我正在尝试连接到 MSMQ 并发送一些消息。不幸的是，项目中有关于如何做到这一点的“先前艺术”，我应该模仿它。之前的应用程序的连接方式如下: if (MSMQ in workgroup mode) {
C++ "Proper"异常处理方式
我正在编写一个可能会被其他人使用的 ROS 节点，这就是我想要遵循通用指南的原因。有时我想为异常添加额外的信息，但我不知道该怎么做。这是一个方便的示例: 我的 ROS 节点使用 boost 库连接到串
ruby - "Proper"以字符串形式输出变量的方法
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 4 年前。 Improve
Django-TinyMCE : How to configure it properly?
我在摆弄 django-tinyMCE并注意到一些配置没有得到应用。这是我的 settings.py 中的代码 TINYMCE_DEFAULT_CONFIG = { 'theme' : 'ad
language-agnostic - "Proper"让客户或经理对软件估计进行现实检查的方法
回顾我过去的项目，我经常遇到这个: 一位客户或经理向我提出一项任务并要求进行估算。我估计说 24 小时。他们还询问了业务分析师，据我所知，他们的经验大多是非技术性的。他们给出的估计是 16 小时。最后
sql - 如何使用:setvar properly?
我使用以下方式调用几个sql文件: :r C:\Scripts\Script1.sql :r C:\Scripts\Script2.sql :r C:\Scripts\Script3.sql 我对 :
variables - AS3中初始化类变量的 "proper"位置在哪里
在类构造函数中初始化 AS3 类变量“更好”吗？或者当我在类的顶部声明它们时，我可以将它们初始化为默认值吗？我问这个问题是因为当有很多类变量时，在一个地方声明它们然后在另一个地方初始化它们似乎效率很低
javascript - 等号 :() doesn't work properly
我有一个代码: $("#button").click(function () { for (var i = 0; i < 4; i++) {
localization - 是否有列出语言的 "proper"顺序？
我们的应用程序正在被翻译成多种语言，我们需要一个组合框来列出可能的语言。我们希望使用该语言的语言名称(例如，Français 表示法语)。列出这些语言是否有任何“正确”的顺序？我们是否根据他们的
Emacs-流浪汉 : Not working properly
我正在尝试在 Ubuntu 12.04 中使用 Tramp/Emacs-23 来编辑远程主机文件。我的远程主机有两步验证 (RSA+Passwd)。我通过 .ssh/config 使用多路复用来确保

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - D3 v4 网格 : How do I bind the data properly?