Question

我想知道如何使用来自Node.js服务器的Socket.io收到的数据库中的数据进行d3数据可视化。我已经阅读了一些关于使用PHP和JSON的帖子。我真的需要JSON吗？如何在不需要PHP的情况下完成此操作？实际上，从Socket.io接收的数据已经存储在数组values_array中。但是这个数组不被d3接受。到目前为止，我尝试了一个getter函数并尝试重写数组 - 但没有成功。任何意见，将不胜感激。下面是客户端HTML代码：

!doctype html>
<html>
    <head>

        <script src='//code.jquery.com/jquery-1.7.2.min.js'></script>
        <script src='//localhost:3000/socket.io/socket.io.js'></script>
        <script type="text/javascript" src="d3.v3.min.js"></script>
        <script>

            window.onload=function(){

            var socket = io();
            var values_array = new Array();


            socket.on('server2browser', function(data)      //  receive
            {
                fkt_values_array(data);   
            });



            function fkt_values_array(data)
            {
                 $.each(data, function(i, obj) 
                 {
                     values_array[i] = obj.numbers;     
                 });

                 $('#arrayprint_values').text(values_array); 
            }


            setTimeout(function() 
            {
                dynamicData = values_array;
            }, Math.random() * 1000);


            dynamicData = [22,33,33];       // This works
            // dynamicData = values_array;  // But I can´t get data from Socket.io into d3






            // Data visualisation (d3)

            var dataset = dynamicData;

            //Width and height
            var w = 500;
            var h = 200;
            var barPadding = 1;

            var svg = d3.select("#diagram")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

            svg.selectAll("rect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("y", function(d) {
                    return h - (d * 4);  //Höher
                })
                .attr("width", w / dataset.length - barPadding)
                .attr("height", function(d) {
                    return d * 4;
                })
                .attr("x", function(d, i) {
                    return i * (w / dataset.length);
                })
                .attr("fill", function(d) {
                    return "rgb(" + (d * 10) + ", 0, " + (d * 10) + ")";
                });


            svg.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .text(function(d) {
                    return d;
                })
                .attr("x", function(d, i) {
                    return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
                })
                .attr("y", function(d) {
                    return h - (d * 4) + 14;  //15 is now 14
                })
                .attr("font-family", "sans-serif")
                .attr("font-size", "11px")
                .attr("fill", "white")
                .attr("text-anchor", "middle");
            }
        </script>
    </head>
    <body>
        <div id='arrayprint_values'> Placeholder Text</div>   // Here the array is successfully printed out
        <div id="diagram"> Placeholder </div>                 // Here the diagram is displayed, but only with static data            
    </body>
</html>

Answer 1

嗯，JavaScript中的所有内容都是JSON，因此使用它是有意义的。

而且你不需要PHP。你似乎已经有一个Node服务器，只需使用:)。但是，您的valuesArray被实例化为空列表，然后多次重新分配给其他对象。您可能希望更改它以提高代码清晰度。一个可能的错误源是D3期望一个数字数组，但你的函数是获取字符串或JSON。也就是说，["1", "2"]或[{number : 1}, {number : 2}]与[1,2]相对。将console.log(obj.numbers)放在fkt_values_array中，看看它是什么样的

使用来自Socket.io的数据进行d3数据可视化

1 个答案: