个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 07:36:24 24 4
gpt4 key购买 nike

我一直在 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/

24 4 0
文章推荐： javascript - 语法错误 : Invalid left-hand side in assignment expression
文章推荐： ruby-on-rails - 在 coffeescript 中获取 rails view helper 方法
文章推荐： spring-security - 运行 JUnit 测试时，Spring Security 不调用我的自定义身份验证过滤器
文章推荐： c++ - 为什么在抛出我的析构函数时没有调用 std::terminate
行者123
个人简介

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

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