Question

我可以访问比特币websocket，它每分钟都会给我比特币的当前市场价格。我想制作一个动态变化的矩形，这些矩形当前传递给我的bardata数组。

以下是代码：

<html>
<script type="text/javascript" src="js/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>


<body>

    <script>
        var webSocket = new WebSocket('wss://socket.cbix.ca/index'); //creating a websocket connection to blockhain.info
        webSocket.onopen = function (event) {
            console.log('Websocket connection open');
        };

        var bardata = [];

        webSocket.onmessage = function (event) {
            var e = jQuery.parseJSON(event.data);
            console.log(e);
            var high = e.high;
            console.log(high);
            update();
            bardata.push(high);
            $('.message').prepend("<p>" + "The highest bitcoin value for this minute is: $" + high + "</p>");

        }



        var height = 730
            , width = 1080
            , barWidth = 50
            , barOffset = 5;

        var yScale = d3.scale.linear()
            .domain([0, d3.max(bardata + 100)])
            .range([0, height])

        var svg = d3.select('body').append('svg')
            .attr('width', width)
            .attr('height', height)
            .style('background', '#C9D7D6')

        function update() {
            svg.selectAll('rect').data(bardata)
                .enter().append('rect')
                .style('fill', '#C61C6F')
                .attr('width', barWidth)
                .attr('height', function (d) {
                    return yScale(d);
                })
                .attr('x', function (d, i) {
                    return i * (barWidth + barOffset);
                })
                .attr('y', function (d) {
                    return height - yScale(d);
                }).transition()
                .attr('height', function (d) {
                    return yScale(d);
                })
                .attr('y', function (d) {
                    return height - yScale(d);
                })
                .delay(function (d, i) {
                    return i * 20;
                })
                .duration(1000)
                .ease('elastic')
        }
    </script>
    <div class="message">
    </div>


</body>

</html>

但是，当我运行此代码时，每次都会创建一个新栏。我知道这是由于更新功能在.onmessage函数再次更新后重新绘制所有内容。我想知道是否有另一种方法可以使用AJAX或其他东西？一些帮助将不胜感激。

Answer 1

您遇到的问题是您的update功能只有＆＃34;输入＆＃34;选择。在这种情况下，预期的行为只有1个不变的条（因为＆＃34;输入＆＃34;选择在第二次打开时为空）。但是，当您将值推到barData时，此barData数组的长度会增加，您看到的条形图是新的＆＃34;输入＆＃34;选择。

因此，第一个更改仅使用barData的 last 值，而不是整个数组。

第二个变化是写一个正确的输入和更新选择。这是你应该怎么做。首先，绑定数据：

var rect = svg.selectAll("rect")
    .data([data]);

然后，创建你的＆＃34;输入＆＃34;选择：

rect.enter()
    .append("rect").attr("x", 0)
    .attr("y", 25)
    .attr("height", 50)
    .attr("width", d => scale(d))
    .attr("fill", "#C61C6F");

这＆＃34;输入＆＃34;选择仅在您第一次拨打update时才有效。从第二次开始，您只会更改现有的栏：

rect.transition()
    .duration(200)
    .ease('elastic')
    .attr("width", d => scale(d));

这是一个演示：

＆＃13;

setInterval(() => {
    var data = ~~(Math.random() * 100)+1;
    update(data);
}, 2000);



var svg = d3.select("#svg")
    .append("svg")
    .attr("width", 300)
    .attr("height", 100);

var text = d3.select("#text");

var scale = d3.scale.linear()
    .range([0, 300])
    .domain([0, 100]);

update(50);

function update(data) {

    var rect = svg.selectAll("rect")
        .data([data]);

    rect.enter()
        .append("rect").attr("x", 0)
        .attr("y", 25)
        .attr("height", 50)
        .attr("width", d => scale(d))
        .attr("fill", "#C61C6F");

    rect.transition().duration(500).ease('elastic').attr("width", d => scale(d));

    text.text("The highest bitcoin value for this minute is: $" + data)
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="text"></div>
<div id="svg"></div>

＆＃13;

使用比特币WebSocket在d3.js中创建实时更改矩形

1 个答案: